角度-高度和宽度的属性绑定不适用于图像

Question

我正在尝试在Angular中进行属性绑定的示例。我决定拍摄一张图像，然后通过属性绑定放置它的所有3个属性-宽度，高度和src。令我惊讶的是，虽然没有错误，并且图像通过URL呈现（URL中没有错误），但宽度和高度仍呈现为零（0）。为什么这个？据我所知，Image将高度和宽度作为其属性。那问题在哪里呢？

abc.component.html

//This does not work - gives height:0px, width:0px
<img [width]="'100px'" [height]="'100px'" [src]="'./assets/img/hermione.jpg'">

//This works - renders image, with height:100px, width: 100px
<img width="100px" height="100px" [src]="'./assets/img/hermione.jpg'">

有人可以通过奇怪的行为来解释为什么第二种情况运行良好，但首先虽然图像被渲染但从未被看到（高度：0px，宽度：0px）？

错误：

另外，（根据Pronoy Sarkar的要求-参见下面的答案）

//This also works
<img [attr.width]="'100px'" [attr.height]="'100px'" [src]="'./assets/img/hermione.jpg'">

现在，问题是为什么简单的[高度]和[宽度]不起作用？毕竟，我们从未做过[attr.src]吗？

Answer 1

尝试[attr.width]并[attr.height]