如何在不指定宽度和高度的情况下显示 url 中的下一张图片

Question

我正在尝试使用

import Image from 'next/image';

在下一个 js 中显示图像，而不指定宽度和高度。

请注意，图像来自 URL，而不是来自项目中的特定文件夹。

<Image     
sizes={"100vw"} 
width={0} 
height={0} 
src={'https://picsum.photos/200/300'} 
placeholder='empty'  />

如果我从文件夹导入图像，此代码可以工作，但是当尝试从 URL 显示图像时，它会失败。

有人知道如何在不添加宽度和高度属性的情况下渲染图像吗？

我还想保留原始大小，而不是使用

fill

和

objectFit

属性使图像适合整个屏幕

Answer 1

根据 Next.js 文档，需要指定远程图像的宽度和高度，因此您无法使用 next/image 组件解决此问题。但是，如果您使用常规 html 标签

<img src='https://picsum.photos/200/300' />

，则不需要指定宽度或高度。