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

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]

Answer 2

如果您在HTML attribute reference - Attribute List Page on MDN上查看“属性列表”，它表示width和height是属性，不是本机属性。

如果您随后转到模板语法基础知识部分的Attribute Binding部分，则说明：

  

如消息所示，该元素没有colspan属性。它具有“ colspan”属性，但是插值和属性绑定只能设置属性，不能设置属性。

     

您需要属性绑定才能创建并绑定到此类属性。

在类似的行上，width和height不是img标记的本机属性。它们是属性。

因此，您无法使用属性绑定语法（[width] / [height]）设置宽度和高度。您必须改为使用“属性绑定语法”。

PS： Attribute List Page on MDN页面中还存在src。但是由于在描述中没有提到它是一个属性，所以我认为它是一个本地属性。