Next.js 具有外部动态源的图像组件

Question

我当时正在开发 Next.js 项目，在本地运行它时，html img 标签工作正常。在构建时，我收到警告，将其从 Next.js 更改为 Image 组件

所以我这样做了，但现在我收到警告：

错误：无效的 src 属性 ( https://image.ceneostatic.pl/data/products/10813131/i-dixit.jpg ) next/image，主机名“image.ceneostatic.pl”未在您的图像下配置。next.config.js 查看更多信息：https ://nextjs.org/docs/messages/next-image-unconfigured-host

我在文档中读到解决方案是向 next.config.js 添加一个域。但我这里出现了两个问题：

1. 即使我指定这样的域，它也不起作用

   module.exports = { 图像: { 域: ['image.ceneostatic.pl'], }, };

2. 我的项目连接到 MongoDB，其中存储了图像的链接。此外，我希望用户在创建新条目时传递链接。所以我不想有硬编码的域，因为我不知道用户将使用哪个图像。

有没有办法省略域列表或绕过使用标签？

谢谢！

Answer 1

您可以通过以下代码使用名为 next Loader 的东西：

import Image from 'next/image'


const myLoader = ({ src, width, quality }) => {
  return `https://image.ceneostatic.pl/data/products/{src}/i-dixit.jpg`
}
var photoID = 10813131

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src=photoID
      width={500}
      height={500}
    />
  )
}

你的 next.config.js：

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://image.ceneostatic.pl',
  },
}

所有文档均链接于此。