5

In my app I allow users to upload their images. Upon uploading it goes into public folder, and in database there is only a direct link for future requests.

When displaying these images on the page I encounter a problem. Image component wants to know height and width of each image. And so I want to know it too.

What are the available options for the workflow in this situation? Both processing while uploading and while requesting will work for me.

Arctomachine
  • 401
  • 6
  • 12
  • Have you considered using [`layout="fill"`](https://nextjs.org/docs/api-reference/next/image#layout) rather than providing dimensions? – juliomalves May 29 '21 at 02:57
  • 1
    @juliomalves I tried it, but it seems like too much trouble to work properly. With the same result and far less amount of effort I can use image component from SemanticUI library, which I use in my project. As of now, I consider `Image` to do more harm than good. – Arctomachine May 29 '21 at 17:50
  • @juliomalves **layout="fill"** hass been depreciated – Hamed Feb 02 '23 at 15:51

1 Answers1

0

You can use image-size npm module:

npm install image-size --save

then:

var sizeOf = require('image-size');
var dimensions = sizeOf('./sample.jpg');
console.log(dimensions.width, dimensions.height);

from: How to check an image dimensions using js or node

Dharman
  • 30,962
  • 25
  • 85
  • 135
holibut
  • 124
  • 1
  • 5