1

我正在使用最新版本的 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 错误,上面写着“Type '"fill"' is not assignable to type '"fixed" | "intrinsic" | "responsive" | undefined'."。我不确定这是否相关?

4

1 回答 1

2

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

这是next/image如何工作的副产品:width/height 属性用于确定纵横比,不一定是显示大小。

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


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

于 2021-03-24T18:57:15.110 回答