Next.js静态站点用next-optimized-images时WebP图片加载失败如何解决？

1. 路径大小写不匹配 #

你本地存放的图片文件名为全小写的header-image.jpg，但代码中require引用时用的是大写开头的Header-Image.JPG，Node.js的模块解析大小写敏感，直接导致找不到对应文件报错。

2. 资源目录使用方式错误 #

你把图片放在了public目录下，Next.js中public目录的资源不需要通过require引入，直接写绝对路径/images/architect/header-image.jpg即可访问。如果你需要用next-optimized-images的图片优化能力，需要把图片放在src目录下（比如src/images/architect/），由插件统一处理打包。

3. 插件配置缺失 #

你当前的配置没有开启webp格式的处理支持，也没有安装对应的处理依赖。

具体修复步骤 #

• 第一步：调整目录结构，把图片从public/images移动到src/images下，确保文件名和代码中引用的大小写完全一致，不需要提前准备webp格式文件，插件会自动生成。
• 第二步：修改next.config.js配置，添加webp支持：

const withOptimizedImages = require("next-optimized-images");
module.exports = withOptimizedImages({
  optimizeImagesInDev: true,
  handleImages: ['jpeg', 'jpg', 'png', 'webp'],
  webp: {
    quality: 80
  }
})

• 第三步：安装webp处理依赖：
  npm install imagemin-webp --save-dev
  或者用yarn：
  yarn add imagemin-webp --dev
• 第四步：修改组件中的图片引用代码：

<picture>
  <source
    srcSet={require("../images/architect/header-image.jpg?webp")}
    type="image/webp" 
  />
  <source
    srcSet={require("../images/architect/header-image.jpg")}
    type="image/jpeg"
  />
  <img
    src={require("../images/architect/header-image.jpg")}
    alt="header image"
  />
</picture>

注意路径替换为你src下图片的相对路径即可。

如果你不想移动图片到src目录，只想用public下的现有文件 #

直接去掉require，用绝对路径引用即可，不需要依赖插件的处理：

<picture>
  <source
    srcSet="/images/architect/header-image.webp"
    type="image/webp" 
  />
  <source
    srcSet="/images/architect/header-image.jpg"
    type="image/jpeg"
  />
  <img
    src="/images/architect/header-image.jpg"
    alt="header image"
  />
</picture>

这种方式不需要调整插件配置，直接使用你提前准备好的webp文件即可。

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