如何使用NextJS Image组件展示props传入的图片？报错求助

从报错信息来看，核心问题是Next.js的Image组件对外部图片域名做了限制。Next.js为了保障安全和优化图片加载性能，默认只允许加载本地图片或已加入白名单的外部域名图片，未配置的域名会直接触发报错。

解决步骤： #

1. 打开项目根目录的next.config.js文件（如果没有则直接新建）
2. 在配置对象中添加images.domains字段，填入你图片所在的实际域名：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    // 替换为你图片对应的域名，比如示例中的i.sstatic.net
    domains: ['i.sstatic.net'],
  },
}

module.exports = nextConfig

3. 重启Next.js开发服务器，配置修改后需要重启才能生效

进阶配置（Next.js 12.3及以上版本） #

如果需要支持通配符域名或更复杂的路径规则，可以使用remotePatterns：

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: '**.your-domain.com',
      pathname: '/images/**',
    },
  ],
}

本地图片加载提示 #

如果是本地图片，确保图片放在项目的public目录下，src直接写/图片文件名即可，无需配置域名白名单。

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