CODEWITHSUNDEEP
htmlangularimageangular-template
Sherif eldeeb
Sherif eldeeb

Reputation: 2186

Angular sets img width to zero

I want to insert an image in an Angular template, the attribute width is equal to a variable width which has the value null in some situations.

anyway I want to set width = "" in this case (or remove this attribute), but Angular sets the width to zero width = "0" which causes the image to be disappeared.

this code:

< img src="..." width ="{{ null + ''}}" />

is rendered as:

<img  src="..." width = "0" />

note that the value null is came from a variable that is set to null dynamically, i.e:

this.width = null;

<img src="..." width = "{{width}}" />

I don't want to replace the attribute width with style="{width:...}", but I may remove this attribute if it has no value.

Upvotes: 0

Views: 877

Answers (1)

Sherif eldeeb
Sherif eldeeb

Reputation: 2186

I solved it by using atrr.width instead of width.

<!-- this will remove the attribute width -->
<img [attr.width]="null" />

<!-- this will set the attribute width to 250px -->
<img [attr.width]="250" />

Upvotes: 3

Related Questions