I’m trying to show image in next js using import Image from 'next/image';
without specifying width and height.
Note that image is coming from URL and not from specific folder in project.
<code><Image
sizes={"100vw"}
width={0}
height={0}
src={'https://picsum.photos/200/300'}
placeholder='empty' />
</code>
<code><Image
sizes={"100vw"}
width={0}
height={0}
src={'https://picsum.photos/200/300'}
placeholder='empty' />
</code>
<Image
sizes={"100vw"}
width={0}
height={0}
src={'https://picsum.photos/200/300'}
placeholder='empty' />
This code works if I import image from folder but when trying to show image from URL it fails.
Anyone has idea how to render image without adding width and height property?
Also I want to preserve original size and not to fit image over all screen using fill
and objectFit
properties