在“下一个/图像"，主机名“本地主机"上出现错误无效的 src 道具('这里是一个链接')未在您的 `next.config.js` 中的图像下配置 [英] Got an error Invalid src prop ('here is a link') on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`

问题描述

我正在使用 Next.js 中的 Image 组件(它是 Next.js 的新功能).我已尝试提供源 URL:

I am using the Image component from Next.js (it's a new feature of Next.js). I've tried to give the source URL:

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

但它向我显示了这个错误.我还在我的 next.config.js 中进行了更改为

But it shows me this error. I also make changes in my next.config.js as

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

但对我没有任何作用.如果您对此有所了解，请提供帮助.

but nothing works for me. Please help if you know anything about this.

推荐答案

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

Yes, I finally got the answer. Make loader function to load it from the destination of the image.

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

将此加载器函数用于图像标签的加载器属性.

Use this loader function the loader attribute of an Image tag.

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

这非常适合我

这篇关于在“下一个/图像"，主机名“本地主机"上出现错误无效的 src 道具('这里是一个链接')未在您的 `next.config.js` 中的图像下配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！