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

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'">

现在，问题是为什么简单的 [height] 和 [width] 不起作用？ 毕竟，我们从来没有做过[attr.src] ？

Answer 1

试试[attr.width]和[attr.height]

Answer 2

如果您在HTML属性引用--MDN上的属性列表页面上查看属性列表 ，它会说width和height是属性而不是本机属性 。

如果您转到模板语法基础部分的属性绑定部分，它会声明：

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

您需要属性绑定来创建和绑定到这些属性。

在类似的行上， width和height不是img标签的Native Properties。 它们是属性。

因此，您无法使用属性绑定语法（ [width] / [height] ）设置宽度和高度。 您将不得不使用属性绑定语法。

PS： src也存在于MDN页面的属性列表页面中。 但是由于在描述中没有提到它作为财产，我认为它是一个本地财产。

Answer 3

您可以对 html 属性使用属性绑定：

[attr.width]="'100px'"
[attr.height]="'100px'"

或者

[attr.width.px]="widthProp"
[attr.height.px]="heightProp"

或者

[attr.width.%]="widthProp"
[attr.height.%]="heightProp"

或者您可以对 CSS 样式使用样式绑定：

[style.width]="'100px'"
[style.height]="'100px'"

或者

[style.width.px]="widthProp"
[style.height.px]="heightProp"

或者

[style.width.%]="widthProp"
[style.height.%]="heightProp"