在 `next/image` 上出现错误 Invalid src prop（'here is a link'），主机名“localhost”未在你的 `next.config.js` 中的图像下配置

Question

我正在使用ImageNext.js 中的组件（它是 Next.js 的一个新功能）。我试图提供源网址：

{`${API}/user/photo/${blog.postedBy.username}`}

但它向我展示了这个错误。我也改变了我的next.config.js作为

module.exports = {
    images: {
      domains: ['localhost'],
    },
  }

但没有什么对我有用。如果您对此有所了解，请提供帮助。

Answer 1

const src = `${API}/user/photo/${blog.postedBy.username}`;
    
<Image loader={() => src} src={src} width={500} height={500}/>

这里loader是一个为您的图像生成 URL 的函数。它将根域附加到您提供的 src 中，并生成多个 URL 来请求不同大小的图像。这些多个 URL 用于自动 srcset 生成，以便您网站的访问者将获得适合其视口大小的图像。

Answer 2

编辑next.config.js：

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
}

Answer 3

是的，我终于得到了答案。使加载器函数从图像的目的地加载它。

const myLoader=({src})=>{
  return `${API}/user/photo/${blog.postedBy.username}`;
}

使用图像标签的加载器属性使用此加载器函数。

<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
    height={500}/>

这对我来说非常有用

Answer 4

这里有一大堆过时的答案建议将密钥设置domains为next.config.js. 从 Next 12.3.0 开始，这不再正确；请参阅： https: //nextjs.org/docs/messages/next-image-unconfigured-host

相反，应该使用一个remotePatterns属性，它比旧的稍微复杂一点domains：

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

Answer 5

我遇到了同样的问题，您需要重新启动开发服务器，每次对文件进行更改时都需要这样做next.config.js。

API 字符串应包含端口。例如localhost:3001