Next.js Discord

Discord Forum

Retrieving image dimensions without rendering <Image/>

Unanswered
Chum salmon posted this in #help-forum
Open in Discord
Avatar
Chum salmonOP
Is there some API to get the original image size (similar to <Image/> component, but without rendering the actuall <img>). For exmaple, I have an array of image URLs (either in public dir or in some remote CDN) and I wanna know width and height of each before they're loaded on frontend. Is there a built-in next.js method to do this?

I know that I can do import myImage from '/path/to/image.jpg and myImage will contain the data, but what if it's a big array of images and not just a couple of urls?

Thanks!

3 Replies

Avatar
joulev
locally then you can do
import image from "./path/to/image.png";

<div>{image.height}</div>
<div>{image.width}</div>

upstream then use something like [this](https://github.com/coderosh/image-size) or [this](https://stackoverflow.com/a/61339155)
Avatar
Chum salmonOP
I see, thank you. Is it a good idea to run those image-size libraries in getServerSideProps?
Avatar
joulev
i think it's ok