Next.js中next/image加载公网IP图片报错问题求助

你遇到的问题核心是next.config.js中remotePatterns的配置错误：hostname字段不能包含端口号，端口需要单独通过port属性指定。

修正后的next.config.js配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  optimizeFonts: true,
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: '110.100.190.222', // 仅保留IP，移除端口
        port: '9790', // 单独指定端口
        pathname: '/images/**', // 可选，限制匹配路径，提升安全性
      },
    ],
    minimumCacheTTL: 1500000,
  },
}

module.exports = nextConfig

额外注意事项 #

• 修改next.config.js后，必须重启Next.js开发服务器，配置才会生效。
• 确认公网IP对应的图片服务允许跨域访问，或者Next.js服务器能正常请求到该IP资源（比如防火墙、安全组是否开放9790端口）。
• 确保item.article_image_path拼接后的路径正确，避免出现重复斜杠（比如若article_image_path以/开头，需避免生成/images//xxx这类异常路径）。

内容的提问来源于stack exchange，提问作者Mr-T