Next.js 在 url 中有扩展名的外部图像失败

Question

我的产品带有来自几个不同远程服务器的图像("next": "^10.1.3",)。现在我想为此添加 next.js 图像。但是在来自一台服务器的代码更新图像不显示（其他都很好）之后。我认为这可能与 URL 中的文件扩展名有关，但 100% 不确定。

例如https://zoom.ocado.com/productImages/518/518554011_518554011_0_1601386321000_1280x1280.jpg Next js 不显示此图。

Answer 1

引用Next.js doc

要为托管在外部网站上的图像启用图像优化， 使用 Image src 的绝对 url 并指定哪些域是 允许优化

因此，请将其添加到您的 next.config.js；

module.exports = {
  images: {
    domains: ['zoom.ocado.com'],
  },
}

为application/octet-stream内容类型响应服务

由于您提供的图片 URL 为 application/octet-stream，这是用于提供图片的错误 mime 类型 - 没有直接的方式来使用 next/image。

但是，您仍然可以执行以下操作；

1. 使用 next.js v11.0.2-canary.4 - 他们最近修复了这个问题 here
2. 使用unoptimized 图像 - 顾名思义，next.js 不会在构建时优化您的图像。例如

<Image src="https://zoom.ocado.com/productImages/518/518554011_518554011_0_1601386321000_1280x1280.jpg"
   alt="Test"
   layout="fill"
   unoptimized={true} 
/>

Answer 2

检查服务器的响应并检查文件的扩展名。我认为这是你的问题。