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

Question

我正在处理我的 Next.js 项目，并且在本地运行它时 html img 标签工作正常。 在构建时，我收到一条警告，将其从 Next.js 更改为 Image 组件

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

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

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

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

   module.exports = { 图片： { 域：['image.ceneostatic.pl']， }, };

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

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

谢谢！

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',
  },
}

所有文档都链接here。