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

IT技术 reactjs image next.js nextjs-image

2021-05-04 23:27:12

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

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

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

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

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

4个回答

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

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

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

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

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

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

使用此加载器函数加载 Image 标签的 loader 属性。

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

这对我很有效

import Image from "next/image";


<Image
    src="image path"
    alt="Picture of the author"
    width={500}
    height={500}
  />

在你的公用文件夹中添加图片，然后给 src 一个路径，例如， src="/imageName.jpg" 添加宽度和高度

其它你可能感兴趣的问题