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

Question

我正在使用 Next.js 中的Image组件（它是 Next.js 的新功能）。我试图给出源 URL：

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

但它向我显示了这个错误。我也改变了我next.config.js的身份

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

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

score 10 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

将此加载器函数用于图像标记的加载器属性。

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

这对我来说非常有用

score 0 · Accepted Answer

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

domains: ['localhost']

并确保返回带有 http(s) 协议的图片链接

与 localhost:port/... 的图像链接是错误的，返回为 http://localhost/... （或使用 https ）

4 回答 4