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

Question

使用 Nextjs，预期结果是看到图像组件渲染为 .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}`  };

Answer 1

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

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

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

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

请记住，某些浏览器不支持 webp。