NextJS Image组件无法加载远程图片问题排查与解决

问题现象 #

按官方文档配置Next.js Image组件加载远程图片后，配置始终未被读取，抛出错误：

Uncaught Error: Invalid src prop (https://images.pexels.com/photos/14397947/pexels-photo-14397947.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) on next/image, hostname "images.pexels.com" is not configured under images in your next.config.js

使用的代码与配置 #

Image组件代码：

<Image 
    src="https://images.pexels.com/photos/14397947/pexels-photo-14397947.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt={props.team.name}
    width={props.width}
    height={props.height}
    placeholder="blur"
/>

next.config.js配置：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.pexels.com',
        port: '',
        pathname: '/photos/**',
      },
    ],
  },
}

无效的尝试操作 #

• 重启开发服务器
• 清理依赖后重新安装
• 更新项目依赖

根因与解决方法 #

根因：使用的Notus NextJS模板内置了旧版本Next.js，而remotePatterns是Next.js 12.3.0及以上版本才引入的远程图片配置项，旧版本无法识别该配置。

解决步骤：

1. 执行命令查看依赖版本状态：

npm outdated

根据输出更新package.json中的Next.js版本到支持remotePatterns的版本
2. 执行项目提供的清理安装命令：

npm run install:clean

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