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?