css Question posted in
Some basic documentation can be found here.

Css – 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

Tags:

2

Answers


  1. 0

    According to the Next.js documentation, specifying the width and height of a remote image is required, so you have no way around this with the next/image component. However, if you use the regular html tag <img src='https://picsum.photos/200/300' />, you don’t need to specify width or height.

    Login or Signup to reply.
  2. 0

    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"
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search