Search code examples
javascriptcssreactjsimagenext.js

How to show next Image from url without specifying width and height

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.

<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

Solution

  • By setting layout="fill", the image will take up the available space without specifying a fixed width and height. And by setting objectFit="none", the image will be displayed in its original size.

    import Image from 'next/image';

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