在 `next/image` 上出现错误 Invalid src prop ('here is a link')，hostname "localhost" is not configured under images in your `next.config.js`

Question

我正在使用 Next.js 中的 Image 组件（这是 Next.js 的新功能）。我试图提供来源 URL:

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

但是它向我显示了这个错误。我还对 next.config.js 进行了更改，如

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

但对我来说没有任何用处。如果您对此有任何了解，请提供帮助。

Answer 1

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

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

Answer 2

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

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 3

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

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

Answer 4

首先添加并重启开发服务器。

domains: ['localhost']

并确保 return 使用 http(s) 协议

图片 link

image link with localhost:port/... 是错误的，return 作为 http://localhost/...（或使用 https）

Answer 5

编辑 next.config.js :

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