如何为Next.js Image组件指定特定图片/URL的格式？

你完全可以针对特定图片强制指定格式，下面是几种可行的实现方式：

1. 自定义 Loader 精准控制格式 #

通过给 Image 组件传入自定义 loader，判断图片路径是否属于图库，手动拼接带 fm=jpg 参数的优化地址：

import Image from 'next/image';

const customImageLoader = ({ src, width, quality }) => {
  // 匹配图库路径的图片，强制使用JPEG格式
  if (src.includes('/gallery/')) {
    return `${src}?w=${width}&q=${quality || 75}&fm=jpg`;
  }
  // 其他图片沿用默认优化逻辑，自动选择avif等最优格式
  return `${src}?w=${width}&q=${quality || 75}`;
};

// 使用示例
<Image
  loader={customImageLoader}
  src="/gallery/landscape.jpg"
  alt="图库风景图"
  width={1200}
  height={800}
/>

2. 在 next.config.js 中针对路径配置格式 #

如果是远程图片，可以在配置文件里针对特定域名/路径设置允许的格式，强制图库图片使用JPEG：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      // 通用图片：自动选择最优格式
      {
        protocol: 'https',
        hostname: 'your-image-cdn.com',
        pathname: '/public/**',
      },
      // 图库图片：仅允许JPEG格式
      {
        protocol: 'https',
        hostname: 'your-image-cdn.com',
        pathname: '/gallery/**',
        format: ['jpg'],
      },
    ],
  },
};

module.exports = nextConfig;

3. 直接在图片地址后拼接参数（简单场景） #

对于本地或支持参数的远程图片，也可以直接在 src 后拼接 fm=jpg，注意用 & 而不是 ?（避免和Next.js优化路由的参数冲突）：

<Image
  src="/gallery/portrait.jpg&fm=jpg"
  alt="图库肖像图"
  width={800}
  height={1000}
/>

注意：JPEG是通用兼容格式，无需担心浏览器支持问题；如果你的图片源不支持 fm 参数，这种方法可能无效，优先用前两种方案。

内容的提问来源于stack exchange，提问作者T.Trinks