Next.js v13 从服务器获取图片失败问题求助

我来帮你搞定这个图片加载的问题，你的报错核心是next/image没识别到配置的hostname，咱们一步步来修正：

1. 修正next.config.js的图片域名配置 #

你当前的配置有两个明显问题：

• 协议不匹配：你的图片URL是http协议，但配置里写的是https
• Pathname配置错误：应该用通配符匹配所有子路径，而不是写具体的域名路径

把next.config.js里的图片配置改成这样：

images: {
  remotePatterns: [
    {
      protocol: 'http',
      hostname: 'localhost',
      port: '1337',
      pathname: '/**', // 匹配这个域名下的所有路径
    },
  ],
},

2. 确保Image组件的src是完整合法的URL #

你的环境变量SERVER是localhost:1337/，直接拼接图片路径的话会缺少http://协议，这也可能导致识别问题。建议：

• 把环境变量SERVER改成http://localhost:1337/（包含协议）
• 或者在拼接时补上协议，比如：

  <Image 
    src={`http://${process.env.SERVER}${cat.img}`.replaceAll(/\\/g, "/")} 
    width={200} 
    height={200} 
    alt="分类图片" // 别忘了加alt属性，符合 accessibility 要求
  />
  

3. 重启Next.js开发服务器 #

修改next.config.js后必须重启开发服务器，配置才会生效，这一步很多人容易漏掉！

完成以上三步后，你的图片应该就能正常加载了。

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