Next.js Next/Image组件生产环境无法渲染问题求助

问题现象 #

在Next.js项目中封装next/image组件后，开发模式（执行next dev）下图片正常显示，但执行next build && next start进入生产模式后，图片无法渲染，仅显示占位图。

相关代码 #

封装的Image组件 #

import NextImage from 'next/image'

const Image = ({ ...rest }) => <NextImage {...rest} />

export default Image

组件调用代码 #

import Image from '@/components/common/Image'
import DeviantImg from './../public/static/images/Deviant_logo_Lg_Red.svg' 

const ComponentName = () => {
    // ...其他逻辑
    return (
        <Image alt="Deviant" src={DeviantImg} className="w-full object-contain object-center" />
    )
}

DOM结构对比 #

开发模式（正常显示） #

<img alt="Deviant" src="/_next/static/media/Deviant_logo_Lg_Red.9413135e.svg" decoding="async" data-nimg="intrinsic" class="w-full object-contain object-center " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="/_next/static/media/Deviant_logo_Lg_Red.9413135e.svg 1x, /_next/static/media/Deviant_logo_Lg_Red.9413135e.svg 2x">

生产模式（无法显示） #

<img alt="Deviant" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="w-full object-contain object-center " style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%">

原因分析 #

Next.js的next/image组件在生产模式下会进行严格的图片优化校验，必须明确提供图片的尺寸信息（width/height属性），或者使用fill属性配合父容器的相对定位来确定尺寸。开发模式下校验逻辑宽松，允许自动推断图片尺寸，但生产模式下缺失尺寸信息时，组件会 fallback 到base64占位图，导致实际图片无法加载。

你的调用代码中没有传递width/height或fill属性，封装组件也没有处理这个逻辑，因此生产模式下无法正确生成图片资源链接。

解决方案 #

方案1：明确传递width和height属性 #

直接在调用Image组件时添加对应图片的宽高值：

<Image 
    alt="Deviant" 
    src={DeviantImg} 
    width={300} // 根据实际图片尺寸设置
    height={100} // 根据实际图片尺寸设置
    className="w-full object-contain object-center" 
/>

方案2：使用fill属性配合父容器定位 #

如果需要图片自适应父容器尺寸，给父容器设置相对定位，同时给Image组件添加fill属性：

{/* 父容器设置相对定位和固定尺寸 */}
<div className="relative w-full h-[100px]">
    <Image 
        alt="Deviant" 
        src={DeviantImg} 
        fill 
        className="object-contain object-center" 
    />
</div>

验证修改 #

修改后重新执行next build && next start，检查生产模式下的DOM结构，若src属性显示为实际的图片资源路径（而非base64占位图），则问题解决。

内容的提问来源于stack exchange，提问作者Pankaj Pramanik