NextJS 14使用React原生<img>标签时src显示[object Object]的问题

原因 #

在NextJS 14中，当你通过import导入本地图片文件时，Next的模块打包系统不会返回纯字符串URL，而是返回一个包含src、width、height等元数据的图片对象。你直接把这个对象赋值给原生<img>的src属性，浏览器会把对象转成字符串"object Object"，自然加载不了图片。而Next官方的<Image>组件内部做了适配，会自动从这个对象里提取正确的src值，所以能正常显示。

解决办法 #

有两种可行的方式：

• 直接提取图片对象的src属性：

  <img className={styles.BenefitImage} src={BenefitImage.src} alt='Image' />
  

• 如果你把图片放在项目根目录的public文件夹下，可以不用import，直接写相对路径字符串：

  <img className={styles.BenefitImage} src="/path/to/benefit-image.png" alt='Image' />
  

  注意路径要从public目录开始写，比如public/images/xxx.png就写/images/xxx.png。

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