NextJS Image组件报错：已设宽高仍提示需指定宽高或fill布局

下面是几个针对性的排查和解决步骤：

• 确认fileUrl的有效性
  确保fileUrl在渲染Image组件时已经正确赋值，不是undefined或空字符串。如果是异步获取的IPFS地址（比如从合约或API拉取），初始渲染时fileUrl可能还没拿到，这时候组件会因为src无效触发错误。可以加个条件渲染，只有当fileUrl存在时才渲染Image：

  {fileUrl && (
    <Image 
      src={fileUrl} 
      alt="Picture of the NFT" 
      className="rounded mt-4" 
      width={350} 
      height={500} 
    />
  )}
  

• 配置NextJS允许外部图片域名
  NextJS的Image组件默认限制加载外部域名的图片，必须在配置文件里声明允许的域名。针对你的IPFS地址，需要把vivi-project.infura-ipfs.io加入白名单：
  如果是Pages Router，修改next.config.js：

  const nextConfig = {
    images: {
      domains: ['vivi-project.infura-ipfs.io'],
    },
  }
  module.exports = nextConfig
  

  如果是App Router（NextJS 13+），推荐用更灵活的remotePatterns：

  const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'vivi-project.infura-ipfs.io',
          pathname: '/ipfs/**',
        },
      ],
    },
  }
  module.exports = nextConfig
  

  修改配置后需要重启开发服务器才会生效。

• 检查属性拼写和类型
  确认width和height是小写，并且传入的是数字类型（不是字符串），你的代码里写的width={350}是正确的，但如果不小心写成字符串width="350"也会触发错误。

如果以上步骤都试过还是不行，可以尝试清除NextJS的缓存（删除.next文件夹后重启），或者直接用原生<img>标签临时测试，确认图片本身可以正常访问。

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