Next.js导入png图片作为img src显示[object Object]无法加载怎么办

问题根因 #

Next.js 导入本地静态图片时，返回值不是路径字符串，是包含src、width、height等属性的配置对象。直接把整个对象传给原生<img>的src属性，对象会被强制转为[object Object]字符串，自然无法加载图片。

解决方法 #

方法1：继续使用原生img标签 #

直接取导入对象的src属性即可：

<img src={information.src} alt="" className={styles.informationImg}/>

方法2（更推荐）：使用Next.js内置Image组件 #

Next.js 官方提供的next/image组件做了大量图片优化，比如懒加载、自动适配格式、压缩等，还能直接传入整个图片导入对象，不需要手动取src：

1. 先导入组件

import Image from 'next/image'

2. 替换原有img标签

<Image src={information} alt="" className={styles.informationImg} />

如果不需要组件自动适配宽高，可以加fill属性配合父容器的相对定位使用，也可以手动传入width、height属性自定义尺寸。

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