1

我正在尝试在我的组件中使用 Next.js 图像组件进行自动图像优化。

import Image from "next/image";

const PicArrs = () => (
  <Image src="remote-location" alt="ViewCrunch" layout="responsive" />
)

但我得到这个错误：

错误：带有 SRC“/renmote-location”的图像必须使用“width”和“height”属性或“unsized”属性。

注意：我希望图像采用 div 的大小，这就是我设置它的原因，layout="responsive"但是当我设置不需要的高度和宽度时，我不会收到此错误。

我已经阅读了文档，并且如前所述，我什至将布局设置为填充，即使文档说如果布局设置为填充，您不需要高度/宽度道具，我仍然会收到此错误。

4

2 回答 2

2

当我第一次开始使用 Next 的图像组件时，我遇到了同样的问题。

为了使图像具有响应性，我们需要为 Image 组件提供以像素为单位的初始宽度和高度。然后，响应式布局将根据屏幕尺寸缩小或放大我们的图像。根据Next 的图像文档，默认断点是deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840].

在我的例子中，我的父 div 的宽度是 680px，所以这就是我使用的宽度，如下所示。但是，即使我使用 1000px 作为宽度，Image 组件仍然会尊重父 div 的宽度。

<Image
  src="/img/cool_cat.png"
  alt="Pretty cool cat"
  width={680}
  height={400}
  layout="responsive"
/>

使用该unsized属性有效，因为我们说我们的图像没有大小。Next 的 Image 组件中断了 this layout="fill"，它不会尊重父 div 的宽度，从而导致意想不到的后果。

于 2020-12-26T20:05:29.323 回答
1

你能试试这个代码吗？

const PicArrs = () => (
       <Image src="remote-location" alt="PedroView" layout="responsive" unsized />
 )
于 2020-12-16T21:22:27.653 回答