Next.js v10.1.3外部图片加载失败：含扩展名URL的图片无法显示

我来帮你一步步分析和解决这个问题，结合你使用的Next.js版本，咱们从最常见的原因开始排查：

1. 优先检查next.config.js的域名白名单配置 #

Next.js的Image组件出于安全考虑，要求所有远程图片的域名必须加入images.domains白名单，否则会直接阻止加载。你需要确认zoom.ocado.com是否已经被添加到配置中：

// next.config.js
module.exports = {
  images: {
    domains: ['zoom.ocado.com', '你的其他服务器域名'],
  },
}

⚠️ 注意：修改这个配置后必须重启Next.js开发服务器，新配置才会生效。

2. 验证图片服务器的响应头是否合规 #

Next.js Image会严格校验图片的Content-Type响应头，比如.jpg格式的图片必须返回image/jpeg类型。你可以通过浏览器开发者工具验证：

• 按下F12打开控制台，切换到「Network」标签
• 刷新页面找到目标图片的请求，查看「Response Headers」里的Content-Type字段
• 如果服务器返回的是text/plain或其他非图片类型，Next.js会拒绝加载这张图

这种情况要么联系服务器管理员修正响应头，要么尝试在next.config.js中明确指定支持的格式（v10.1.3版本支持该配置）：

module.exports = {
  images: {
    domains: ['zoom.ocado.com'],
    formats: ['image/jpeg', 'image/png'],
  },
}

3. 测试图片本身的可访问性与URL合法性 #

先直接在浏览器地址栏打开这个图片URL，确认图片能正常显示。如果浏览器能打开但Next.js Image不能加载，要检查：

• URL是否有拼写错误，比如多余的空格或特殊字符
• 图片URL中的参数（比如时间戳1601386321000）是否被Next.js的URL解析逻辑误判

你也可以先用普通的<img>标签测试：

<img src="https://zoom.ocado.com/productImages/518/518554011_518554011_0_1601386321000_1280x1280.jpg" alt="Product" />

如果普通<img>能显示，就可以确定问题出在Next.js Image的配置或优化逻辑上，回到前面的步骤排查。

4. 排查跨域（CORS）限制 #

部分服务器会限制跨域请求，Next.js Image加载远程图片时会通过自身代理发起请求，如果服务器拒绝了来自你应用域名的请求，也会导致图片无法加载。你可以查看浏览器控制台的报错信息，是否有类似「No 'Access-Control-Allow-Origin' header」的提示。

如果是CORS问题，有两种解决方案：

• 联系服务器管理员，在服务器配置中添加你Next.js应用域名的跨域允许规则
• 自定义Next.js API路由作为图片代理，通过代理请求绕过CORS限制（适合无法修改服务器配置的场景）

内容的提问来源于stack exchange，提问作者Максим Шутков