1

I am using the NextJS Image component to render images using a provided URL. I want it to display the images at their full native size. When using it to render local images, it works perfectly as such:

<Image src={news.image} alt={news.title} />

However, when I try to render an image from a URL, it asks for width and height props to be passed. One way to bypass this is to use the layout="fill" property, but this results in a badly scaled image. I also tried passing "100%" as properties but it renders the image as 100x100px.

Is there a way that I can essentially fetch the native size of the image from its URL and pass it to the next/Image component to render at its full size?

Manaf Asif
  • 19
  • 3
  • 1
    Refer last part of this answer: https://stackoverflow.com/a/69344756/11613622, [`probe`](https://www.npmjs.com/package/probe-image-size) supports passing external URLs too. – brc-dd Jan 10 '22 at 06:49

0 Answers0