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)?

Ошибка:

Также (согласно Проной Саркар - см. Ответ ниже)

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

Теперь, вопрос, почему простые [высота] и [ширина] не работают?В конце концов, мы никогда не делали [attr.src] ?

Answer 1

Если вы посмотрите на Список атрибутов здесь на Ссылка на атрибут HTML - Страница списка атрибутов на MDN , это говорит о том, что width и height являются атрибутами и НЕ Собственные свойства .

Если вы затем перейдете к разделу Привязка атрибутов раздела Основы синтаксиса шаблона, в нем будет указано:

Как говорится в сообщении, элемент не имеет свойства colspan.Он имеет атрибут «colspan», но интерполяция и привязка свойств могут устанавливать только свойства, а не атрибуты.

Для создания и привязки таких атрибутов необходимы привязки атрибутов.

Напохожие строки, width и height не являются собственными свойствами тега img.Это атрибуты.

Следовательно, вы не можете устанавливать ширину и высоту, используя синтаксис привязки свойств ([width] / [height]).Вместо этого вам придется использовать синтаксис привязки атрибутов.

PS: src также присутствовал на странице списка атрибутов на странице MDN .Но поскольку в описании не было упоминания о нем как о свойстве, я решил, что это нативное свойство.

Answer 2

Попробуйте [attr.width] и [attr.height]