NextjS src 和默认外部图像 URL 的图像问题

Question

我正在使用最新版本的 NextJS 10.0.9。我有一个想要显示的图像，但是收到错误：

Error: Image with src "https://picsum.photos/480/270" must use "width" and "height" properties or "layout='fill'" property.

正如您在这里看到的，我确实设置了所有这些属性：

<div className="card-img">
  <Image
    alt={media?.title}
    title={media?.title}
    src={media?.previewImage || 'https://picsum.photos/480/270'}
    width={480}
    height={270}
    layout="fill"
  />
</div>

由于某种原因，默认的外部图像似乎不想与图像组件很好地配合。有谁知道解决方法或可能出现这种情况的原因？

还有一点旁注：我在属性上遇到了 Typescript 错误layout，提示“类型‘“fill”’不可分配给类型‘“fixed”|“intrinsic”|“responsive”| undefined’。”。我不确定这是否相关？

Answer 1

如果使用layout='fill'，则不需要宽度和高度属性。错误消息并不完全清楚，但“或”是异或。您可以定义宽度/高度 或layout='fill'，但不能同时定义两者。

这是next/image工作方式的副产品：宽度/高度属性用于确定宽高比，而不一定是显示尺寸。

由于layout='fill'表示“拉伸以填充父元素”，因此宽度和高度没有意义。因此，要修复错误，请删除layout='fill'或删除尺寸。

您可能已经看到过这一点，但这里是以防万一的文档： https: //nextjs.org/docs/api-reference/next/image