Next.js 13中使用Image组件加载外部图片报错求助

正确的Next.js 13+ remotePatterns配置 #

无需指定端口，HTTPS默认使用443端口，直接配置域名和路径即可：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'via.placeholder.com',
        pathname: '/**', // 允许该域名下所有路径的图片资源
      },
    ],
  },
};

module.exports = nextConfig;

旧版本Next.js domains配置 #

如果你的项目使用Next.js 12及以下版本，或者remotePatterns配置不生效，可改用domains配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['via.placeholder.com'],
  },
};

module.exports = nextConfig;

关键排查点 #

• 重启开发服务器：修改next.config.js后必须重启Next.js服务，配置才会生效，这是最容易忽略的点
• 检查图片URL拼写：确保src中的域名是via.placeholder.com，且协议为HTTPS
• 版本兼容性：Next.js 13.0-13.2版本的remotePatterns存在部分兼容性问题，建议升级到13.2+版本，或切换为domains配置
• 避免配置冲突：不要同时混合使用remotePatterns和domains，保持单一配置方式

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