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

问题描述

我使用的是最新版本的 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>

出于某种原因，使用默认的外部图像似乎不想与 Image 组件很好地配合使用。有没有人知道这种情况的解决方法或原因？

还有一点说明：我在 layout 属性上有一个 Typescript 错误，提示“类型 '”填充'' 不能分配给类型 '"fixed" | "intrinsic" | "responsive" | 未定义'。”。我不确定这是否相关？

解决方法

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

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

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

---

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