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

Posted 2023-03-06

【中文标题】Next.js 带有外部动态源的图像组件

【英文标题】：Next.js Image component with external dynamic source

【发布时间】：2021-10-12 04:21:33

【问题描述】：

我正在处理我的 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。 但是我在这里遇到了两个问题：

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

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

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

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

谢谢！

【问题讨论】：

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

我做了，仍然没有。即使这个解决方案有效，它也不能让我满意，因为我想让用户将任何 url 添加到数据库中

您可能想直接在next/image 组件中使用custom loader。

【参考方案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。

【讨论】：

那我让用户给他/她自己的图片添加链接的情况呢？那我就不能硬编码路径了，有走走的吗？

是的，我已经编辑了我的答案以向您展示：查看传入 myImage 函数时的变量 photoID。