Next.js 带有src和默认外部图像URL的NextjS图像问题

我使用的是最新版本的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”“不可分配给Type”“fixed”“instructive”“responsive”“undefined.”。我不确定这是否相关？

如果使用

layout='fill'

，则不需要宽度和高度属性。错误消息并不完全清楚，但“or”是一个异或。您可以定义宽度/高度或

layout='fill'

，但不能同时定义两者

这是工作原理的副产品：宽度/高度道具用于确定纵横比，而不一定是显示尺寸

由于

layout='fill'

表示“拉伸以填充父元素”，因此宽度和高度没有意义。因此，要修复错误，请删除

layout='fill'

，或者删除尺寸标注

---

---

您可能已经看到了这一点，但以下是以防万一的文档：

需要注意的是，如果使用填充布局，则不需要指定宽度或高度。我使用您在此处提供的图像创建了一个沙盒：。确保该域已添加到next.config.js，尽管我假设您可能已经添加了该域，否则您将看到该错误。谢谢Alex！我知道我离得很近，只是不能完全正确。最后，我保留了

layout=“fill”

，并将高度/宽度应用于父div。另一个原因是我注意到您使用了

objectFit=“cover”

属性。再次感谢！没问题，是的，我只是补充说，为了确保在保持纵横比的同时填充父空间，您可能不希望在您的用例中使用它，这很有意义。不知道为什么我这么费劲地理解文档！我最终保留了

layout=“fill”

，并将height/width应用于父div。实现这一点的另一个原因是我添加了

objectFit=“cover”

属性。再次感谢！