我试图使用import Image from 'next/image';在下一个js中显示图像,但不指定宽度和高度.

Note that image is coming from URL and not from specific folder in project.

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

如果我从文件夹导入图像,则此代码有效,但当try 从URL显示图像时,则会失败.

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

我还想保留原始大小,而不是使用fillobjectFit属性将图像覆盖在所有屏幕上

推荐答案

通过设置layout="fill",图像将占用可用空间,而无需指定固定的宽度和高度.通过设置jectFit ="无",图像将以其原始大小显示.

import Image from 'next/image';

<Image
  src={'https://picsum.photos/200/300'}
  layout="fill"
  objectFit="none"
  placeholder="empty"
/>

Javascript相关问答推荐

判断现代浏览器中的点击是否由touch 触发

当我使用jQuery时,我的图标显示为[对象对象]

单击树元素时阻止焦点事件触发?

React对话框模式在用户单击预期按钮之前出现

将状态向下传递给映射的子元素

如何在Javascript中的控制台上以一行形式打印循环的结果

Snowflake JavaScript存储过程返回成功,尽管预期失败

如何让npx在windows中运行js脚本?

setcallback是什么时候放到macrotask队列上的?

如何将Openjphjs与next.js一起使用?

用JS从平面文件构建树形 struct 的JSON

使用Nuxt Apollo在Piniastore 中获取产品细节

如何使用TypeScrip设置唯一属性?

如何限制显示在分页中的可见页面的数量

第一项杀死下一项,直到数组长度在javascript中等于1

在Odoo中如何以编程方式在POS中添加产品

判断函数参数的类型

我正在试着做一个TicTacToe Ai来和我玩.但是,我试着在第一个方块被点击时出现一个X,然后在第二个方块之后出现一个O

重新呈现-react -筛选数据过多

我不知道如何纠正这一点.