Next.js使用next/image导入图片报Failed to parse src错误如何解决

问题根因 #

Next.js的public文件夹是项目的静态资源服务根目录，所有存放在这个目录下的资源，在代码中引用的时候不需要带上public前缀，也不能用相对路径写法，必须以/开头引用。你现在写的../public/logo.png不符合next/image的路径规则，所以触发报错。

修复方案 #

直接把src属性的值改成/logo.png即可，参考示例：

import Image from 'next/image'

// 错误写法
<Image src="../public/logo.png" alt="logo" width={100} height={100} />

// 正确写法
<Image src="/logo.png" alt="logo" width={100} height={100} />

补充规则说明 #

• 引用public目录下的嵌套资源也遵循同样规则，比如public/images/icon.png的引用路径就是/images/icon.png
• 只有当你引用的是项目源码目录（比如src/assets下）的图片，才需要用相对路径导入再传给next/image，public目录下的资源一律用/开头的根路径引用

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