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

NextjS Image issue with src and default external image 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>

出于某种原因,使用默认外部图像似乎并不能很好地与图像组件配合使用。有谁知道出现这种情况的解决方法或原因吗?

还有一点注意事项:我在 layout 属性 上遇到了一个 Typescript 错误,上面写着“Type ''fill'' is not assignable to type '"fixed" | "内在”|“响应式”|未定义'。我不确定这是否相关?

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

这是 next/image 工作方式的副产品:width/height 道具用于确定宽高比,不一定是显示尺寸。

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


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