为什么我在 Next.js 中得到这个？ <link rel=preload> 的 `imagesrcset` 值无效答案

【问题标题】：Why I get this in Next.js? <link rel=preload> has an invalid `imagesrcset` value为什么我在 Next.js 中得到这个？ <link rel=preload> 的 `imagesrcset` 值无效
【发布时间】：2021-11-02 01:36:36
【问题描述】：

我在轮播中有图片：

<Image
  src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`}
  className={styles.carouselImage}
  layout="responsive"
  width={865}
  height={513}
  key={`${props[organizationId].events[programId].imgId}`}
  priority={true}
/>

我认为所有src 都设置得很好，因为图像是可见的、渲染的。那有什么问题呢？

我在控制台中看到了这个：

具有无效的“imagesrcset”值

【问题讨论】：

是的，奇怪的错误。 srcSet 应该是可选的，<Image> 在 Next 中。你从next/image 导入的正确吗？
你使用的是什么next 版本？
我也遇到了这种情况。如果我删除priority，错误就会消失，所以也许与此有关？而且它似乎与在 next.config.js 中注册域无关，因为在我的情况下，我正在从公共文件夹加载图像。

标签： javascript css next.js

【解决方案1】：

bug has been filed with Safari 似乎是唯一抱怨的浏览器。

我认为您可以放心地忽略此错误。

【讨论】：

【解决方案2】：

你应该把它添加到你的 next.config.js 文件中

module.exports = {
  images: {
    domains: ["amazonaws.com"],
  },
}

来自docs：

要为托管在外部网站上的图像启用图像优化，请为图像源使用绝对 URL，并指定允许优化哪些域。这是确保外部 URL 不会被滥用所必需的。

【讨论】：