为什么我的Nextjs <Image>组件会呈现为jpg而不是Webp或Avif？

Question

为什么我的Nextjs <Image>组件会呈现为jpg而不是Webp或Avif？

next.jswebpnextjs-imageimage-optimizationimage-rendering

3

使用Nextjs时，预期结果是将Image组件呈现为.WebP或.AVIF格式，但它仍然是jpg格式。

以下是我的 next.config.js 文件。

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    domains: ['cdn.sanity.io'],
    formats: ['image/avif', 'image/webp'],
  },
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
    });
    return config;
  }, };

以下是next/image组件：

   <Image
                          className="kitchen-img"
                          loader={myLoader}
                          loading="lazy"
                          layout="fill"
                          objectFit="cover"
                          src={urlFor(kitchen.mainImage).url()!}
                          alt={kitchen.title}
                        />

有什么想法为什么它没有显示为avif/webp？我错过了什么吗？

const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}`  };

- Enadot

2

你能分享一下你的加载器（myLoader）吗？看起来你直接触发了CDN上的图片，而没有存储在next缓存文件夹中。 - Elisei Nicolae

嗨，Nicolae，感谢你的帮助，我已经添加了加载器的代码。有什么想法吗？ - Enadot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elisei Nicolae · Accepted Answer

在您的情况下，您正在使用一个加载程序，该加载程序将直接从您的CDN触发图像，并且不会存储在next缓存文件夹中。

为了确保100％，请尝试删除loader={myLoader}并再次检查网络 :)（使用next dev进行测试，并检查您的图像是否具有webp扩展名）。

如果您仍然想使用webp，请检查是否可以通过您的CDN发送扩展名。

const myLoader = ({ src, width, quality }: any) => {
  return `${src}?w=${width}&q=${quality || 85}&?fm=webp`
};

请记住，有些浏览器不支持 webp 格式。了解更多信息。