如何通过打字稿获得IMG高度

Question

我正在尝试在加载后获得图像的高度。我尝试了几种不同的方式，但是越野打印0，其他人什么也没印刷。这些元素已在查询高度的点上加载，就像我查询高度之前一样，我通过getElementById和setAttribute呼叫成功设置了它们的宽度。

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.gallery img {
  width: 100%;
  display: block;
}

id 6对应于图像，并且它确实存在/已在这些调用中呈现在Typescript中。

我的思想在底部的想法是，如果我能获得图像的顶部和底部，我可以在不得到它的情况下锻炼高度。

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>

Answer 1

尝试这个 -

const el: HTMLElement = document.getElementById('6');
console.log(el.offsetHeight);

Answer 2

您可以安装库：

npm install image-size --save

示例代码：

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

async/等待(打字稿＆amp; es7(

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);
}

参考此处

希望对您有帮助。