Next.js 13.0.3 Image组件加载远程图片报错求助

排查步骤与解决办法 #

1. 确认next.config.js的完整结构 #

你提供的配置仅展示了images字段，需确保整个配置被正确导出。完整的配置文件应如下：

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

module.exports = nextConfig

若未将配置包裹在module.exports中，Next.js无法读取图片域名规则，会直接抛出未配置错误。

2. 强制重启开发服务器 #

修改next.config.js后，Next.js不会自动热加载配置，必须手动终止当前开发服务（按Ctrl+C），再重新执行npm run dev启动服务，新的图片域名配置才会生效。这是新手最容易忽略的操作。

3. 验证路径匹配规则 #

你的pathname配置/demos/images/**理论上可匹配/demos/images/nature-1.jpg，但可临时简化规则测试是否为路径匹配问题：

pathname: '/**',

若修改后图片能正常加载，说明原路径规则存在匹配偏差（比如隐含的路径大小写、额外层级等），再逐步调整回精确路径规则。

4. 升级Next.js版本 #

Next.js 13.0.3属于早期13.x版本，存在部分remotePatterns的已知bug。建议升级到13.4及以上的稳定版本，这类配置问题在后续版本中已被修复。

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