Next.js + 生产版本 + Webp 格式图像

Question

我有一些已经采用

.webp

格式的图像。

/public/images/Image.webp 

它们在我的开发本地环境中工作，但是当我构建和查看静态站点时，图像无法显示。

<picture>
    <source
        srcset="/images/architect/Header-Image.webp"
        type="image/webp"
    />
    <img srcset="/images/architect/Header-Image.webp" />
</picture>

文件位置图片：

/public/
    images/
        architect/

Answer 1

在 Nextjs 中，如果您能够在本地主机中看到图像，但在生产中它不起作用，则意味着在图像标记中添加未优化的道具，如下所示

<Image unoptimized/> 

，或者在 next.config.ts 添加

 images: {
unoptimized: true}