Next.js 图像组件与外部动态源

Question

我正在处理我的Next.js项目，当在本地运行时html img标签工作正常。在构建过程中，我收到了一个警告，要求我从Next.js更改为Image组件。

所以我做了，但现在我得到了一个警告：

错误：next/image上的无效src属性（https://image.ceneostatic.pl/data/products/10813131/i-dixit.jpg），主机名“image.ceneostatic.pl”未在您的next.config.js中的图像下进行配置 查看更多信息：https://nextjs.org/docs/messages/next-image-unconfigured-host 我在文档中阅读到的解决方案是将域添加到next.config.js中。但是这里出现了两个问题：

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

   module.exports = { images: { domains: ['image.ceneostatic.pl'], }, };

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

是否有省略域名列表的方法或者使用标签的解决方法？

谢谢！

- Ania Kowalska

---

即使我像这样指定了一个域名，它也不起作用 - 在 next.config.js 中进行更改后，您是否重新启动了 Next.js 开发服务器？ - juliomalves

我试过了，还是没有用。即使这个解决方案有效，也不能满足我的需求，因为我想让用户将任何URL添加到数据库中。 - Ania Kowalska

你可能想要研究一下在 next/image 组件中直接使用 自定义加载器。 - juliomalves

Answer 1

您可以通过以下代码使用称为next Loader的工具：

你可以通过下面的代码使用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',
  },
}

所有的文档可以在这里找到。

- EJZ

---

那如果我允许用户添加自己的图片链接呢？这样我就不能硬编码路径了，有什么解决方法吗？ - Ania Kowalska

是的，我已经编辑了我的答案来向您展示：请看变量photoID在传递到myImage函数时的情况。 - EJZ

这不是一个解决方案，你仍然需要在next.config.js中硬编码域名。 - Alex Garcia