How to deal with images with unknown dimensions? #120
-
|
Hi, I have the challenge that I don't know width and height of the images I want to use with react-photo-album (the source URLs are actually returned by a GraphQL request, unfortunately there is no way to retrieve width and height as well). Do you have any idea how I can use them with this library with the masonry layout without the dimension information? Thanks for your help! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The most efficient solution is to obtain image dimensions on the server side and persist/cache them for future use. You can use a 3rd-party library like image-size. The least performant solution would be to load images on the client, obtain the dimensions, and then render the gallery component. It's also worth mentioning that you can use image aspect ratio in leu of the exact dimensions (i.e., you can use I hope this helps. |
Beta Was this translation helpful? Give feedback.
-
|
Thanx, I will give it a try. 👍 |
Beta Was this translation helpful? Give feedback.
react-photo-albumrequires image dimensions in order to calculate pixel-perfect layout.The most efficient solution is to obtain image dimensions on the server side and persist/cache them for future use. You can use a 3rd-party library like image-size.
The least performant solution would be to load images on the client, obtain the dimensions, and then render the gallery component.
It's also worth mentioning that you can use image aspect ratio in leu of the exact dimensions (i.e., you can use
width: 400, height: 300if your image is of 4:3 aspect ratio).I hope this helps.