7

我试图在 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]？

4

2 回答 2

11

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

于 2018-10-14T06:14:26.743 回答
2

如果您查看HTML 属性参考上的属性列表 - MDN 上的属性列表页面，它会说width并且height是属性而不是本机属性。

如果您然后转到模板语法基础部分的属性绑定部分，它会指出：

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

您需要属性绑定来创建和绑定此类属性。

在类似的行中，width并且height不是img标签的本机属性。它们是属性。

因此，您不能使用属性绑定语法 ( [width]/ [height]) 设置宽度和高度。您必须改用属性绑定语法。

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

于 2018-10-14T06:41:54.643 回答