Obtaining the height of an image using TypeScript

Question

Obtaining the height of an image using TypeScript

I am trying to retrieve the height of an image after it finishes loading. Despite my attempts, the offsetHeight property returns 0 and the other methods do not return any values. I can confirm that the elements are loaded when querying their heights because I successfully set their widths using getElementById and setAttribute right before checking their heights.

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.gallery img {
  width: 100%;
  display: block;
}

The image with the id "6" does exist and has been rendered at the time of these TypeScript calls.

My hypothesis behind trying to get the bottom position was based on the idea that if I could determine the top and bottom coordinates of the image, I could calculate its height without directly retrieving it.

console.log(document.getElementById("6").offsetHeight.toString());
console.log(document.getElementById("6").offsetHeight.valueOf());
console.log(document.getElementById("6").style.height);
console.log(document.getElementById("6").style.bottom);
console.log(document.getElementById("6").style.borderBottom);

HTML

  <div id={{i}} *ngFor="let image of images; let i = index;">
    <img class="img-responsive" src={{image.src}} alt="" (click)="clicked()">
  </div>

html css angular typescript

Answer 1

Answer №1

Check out the following solution -

let element: HTMLElement = document.getElementById('6');
console.log(element.offsetHeight);

Answer 2

Check out the following solution -

let element: HTMLElement = document.getElementById('6');
console.log(element.offsetHeight);

Answer 3

Answer №2

If you're looking to add a useful library, consider installing the following:

npm install image-size --save

For those curious about how to use it, here is some sample code:

var sizeOf = require('image-size');
var dimensions = sizeOf('images/funny-cats.png');
console.log(dimensions.width, dimensions.height);

If you prefer working with Async/Await in Typescript & ES7, check out this snippet:

var { promisify } = require('util');
var sizeOf = promisify(require('image-size'));
try {
  const dimensions = await sizeOf('images/funny-cats.png');
  console.log(dimensions.width, dimensions.height);
} catch (err) {
  console.error(err);
}

You can find more information here.

I hope this guide proves helpful for you.

Answer 4

If you're looking to add a useful library, consider installing the following:

npm install image-size --save

For those curious about how to use it, here is some sample code:

var sizeOf = require('image-size');
var dimensions = sizeOf('images/funny-cats.png');
console.log(dimensions.width, dimensions.height);

If you prefer working with Async/Await in Typescript & ES7, check out this snippet:

var { promisify } = require('util');
var sizeOf = promisify(require('image-size'));
try {
  const dimensions = await sizeOf('images/funny-cats.png');
  console.log(dimensions.width, dimensions.height);
} catch (err) {
  console.error(err);
}

You can find more information here.

I hope this guide proves helpful for you.

Obtaining the height of an image using TypeScript

Answer №1

Answer №2

Similar questions

Issue encountered while integrating crispy forms with Django and bootstrap

Difficulty encountered when trying to display multiple 3D models utilizing a URL as the source in conjunction with ar.js and A-frame

Aligning the column to the right to ensure the text is centered horizontally on the screen

Refreshing the Ionic page by reloading it after navigating to a different URL page

Variables within Angular2 services are resetting when the route changes

Create a new CSS rule within a class, and remember to save the changes to

utilizing a dynamic illustration as the backdrop

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

Prevent Repetition of Meta Descriptions and Keywords within Next.js

Aurelia Fetch functionality disrupted following recent NPM update

What is the best way to remove table cells from a TableBody?

Why does Primeng Lazy loading trigger multiple times when updating the sortField and sortOrder?

An easy tutorial on creating a captivating background animation that moves seamlessly from left to right and vice versa

Error: The property 'push' in Typescript is missing

Using PHP and AJAX to dynamically update the second select option in an HTML table, while also adding new rows using a JavaScript function

When I adjust the page size, the navbar stays hidden after clicking

centering pictures vertically on my webpage

Angular 2/NPM: setting up a new directory with all the necessary files for running the application

Instructions on how to trigger an http request upon clicking a link, alter the href, and proceed to navigate to the new destination

The div is lacking in height