Docker部署应用时图片加载失败排查（本地运行正常）

你的问题是Next.js生产环境下的图片域名校验限制导致的：

• 本地开发模式（next dev）中，Next.js对外部图片域名的校验较为宽松，允许加载任意域名的图片
• Docker中运行的是生产模式（next start），Next.js会强制校验图片来源域名，未在配置中授权的域名会返回400 Bad Request

具体解决步骤 #

1. 添加图片域名授权配置
   在项目根目录创建或修改next.config.js，添加images.remotePatterns配置，允许bing.com的图片请求：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'www.bing.com',
        port: '',
        pathname: '/th/**',
      },
    ],
  },
}

module.exports = nextConfig

2. 重新构建Docker镜像
   因为修改了Next.js的配置文件，需要重新构建镜像并启动服务：

docker-compose down
docker-compose build
docker-compose up -d

验证 #

重新访问应用后，Bing的图片应该能正常加载，Network标签中的请求会返回200状态码。

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