如何为next/image静态导入图片？出现loader报错该如何解决？

错误触发原因 #

• Next.js 对next/image的静态资源导入内置支持是11及以上版本才提供的，如果你的项目使用的是10或更低版本，没有内置对应的图片资源loader，就会触发该报错。
• 如果你在next.config.js中配置了自定义webpack规则，可能覆盖了Next.js默认的图片资源处理逻辑，导致内置loader失效。
• 项目配置的自定义Babel规则、三方编译插件也可能干扰默认的静态资源解析逻辑。
• 本地开发缓存异常也可能导致loader规则没有正常加载。

修复方案 #

• 首先确认项目依赖的Next.js版本，低于11的话先升级到11及以上的稳定版本。
• 检查next.config.js中是否存在自定义的webpack图片处理规则（比如自行配置了file-loader、url-loader处理png/jpg等格式），如果有可以删除这部分自定义配置，使用Next.js内置的处理逻辑即可。
• 你也可以直接使用public目录资源的默认映射路径，不需要导入图片资源，写法如下：

import Image from "next/image"

// 直接填写public下的相对根路径即可，不需要import引入
function Demo() {
  return <Image src="/IMG_2117.png" alt="图片描述" width={600} height={400} />
}

• 清理本地开发缓存：删除项目根目录下的.next文件夹，重新执行npm run dev启动项目即可。

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