3

I'm building a image gallery component in NextJS, and I want the images provided to render with the original dimensions, say if an image is 300x300, the image will render 300x300, and if the image is 200x250, it will render 200x250.

I want to use the NextJS built-in <Image /> component (because of its built-in features and optimization), but it required that I specify a dimension or use layout="fill". I read this post which suggests using layout="fill", but the problem is that the image will still render in its container's size, not in its own size. I want the image to render just as-is. Currently I'm using the <img /> element, but NextJS keeps warning and annoying me and telling me that it's a bad choice. Is there a workaround? Should I just stick with the img tag?

Note: I'm using dynamic images via randomly generated URLs, so I can't import them.

code
  • 5,690
  • 4
  • 17
  • 39
  • `width` and `height` are also not required if you're [statically importing](https://nextjs.org/docs/basic-features/image-optimization#local-images) - are these images dynamic or static? – Brendan Bond Dec 14 '21 at 07:08
  • Does this answer your question? [How to get image height and width properties in Next.js?](https://stackoverflow.com/questions/69344032/how-to-get-image-height-and-width-properties-in-next-js) – brc-dd Dec 14 '21 at 07:59
  • Dynamic, unfortunately. I randomly generate images (URLs). I'll keep what you said in mind though - it'll come in handy soon. – code Dec 14 '21 at 19:27
  • 1
    @brc-dd not quite. I'm not importing static images. Check the updated question. – code Dec 14 '21 at 19:29

0 Answers0