• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

184
Views
Is there a way to get image width and height at build-time in webpack?

I am using webpack to bundle an application, this app has a component that lazy loads images when they are scrolled into the viewport using intersection observer. As some of these images are portrait and others landscape I want a solution that enables me to prevent the 'popcorn effect' whilst the images are still loading. One way I thought about doing this was to compute the image dimentions at build-time and pass them into the component, something like:

<LazyLightbox
  src={imageSrc}
  thumbSrc={thumbSrc}
  thumbWidth={() => someWebpackFunctionThatComputesWidth(thumbSrc)}
  thumbHeight={() => someWebpackFunctionThatComputesHeight(thumbSrc)}
/>

... which when i run my build script produces something like...

<LazyLightbox
  src={imageSrc}
  thumbSrc={thumbSrc}
  thumbWidth={'200px'}
  thumbHeight={'120px'}
/>

That way the placeholder (before the thumb loads) would be the same dimentions of the thumb image that eventually loads.

Thanks in advance for any help or advice you can provide.

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error