Next.js 12+内置imgix加载器配置问题：URL参数异常

你遇到的?url=前缀是因为Next.js的imgix加载器触发了Web Proxy模式，但你实际需要的是直接访问托管在imgix上的图片（Web Folder模式）。当加载器检测到src路径格式与path配置不匹配时，会自动切换到代理模式，将图片路径作为url参数传递。

只需调整path配置和src路径的组合，确保两者拼接后是imgix图片的直接访问地址，有两种可行方式：

方式一：调整src路径（推荐） #

保持next.config.js的path配置不变，将Image组件的src去掉开头的斜杠：

修改后的Next.config.js #

module.exports = {
  images: {
    loader: "imgix",
    path: "https://account.imgix.net/",
    // 注：使用imgix loader时，domains配置会被忽略，可移除
  },
};

修改后的Image组件代码 #

<Image
  alt="hero"
  src="hero.jpeg" // 去掉开头的斜杠
  fill
  quality={20}
  style={{
    objectFit: "cover",
    objectPosition: "20% center",
    borderRadius: 10,
  }}
  priority
/>

方式二：调整path配置 #

如果坚持使用带斜杠的src路径，将path末尾的斜杠移除：

修改后的Next.config.js #

module.exports = {
  images: {
    loader: "imgix",
    path: "https://account.imgix.net", // 移除末尾斜杠
  },
};

保持Image组件的src不变 #

<Image
  alt="hero"
  src="/hero.jpeg"
  fill
  quality={20}
  style={{
    objectFit: "cover",
    objectPosition: "20% center",
    borderRadius: 10,
  }}
  priority
/>

调整后生成的图片URL会变为https://account.imgix.net/hero.jpeg?w=640&q=20&fm=webp，不再包含?url=前缀，图片即可正常加载。

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