The difference between [src] and src in Angular2

Question

In Angular1,

<img ng-src="{{imageUrl}}">

This will hide the broken image icon if the imageUrl file is empty.

But in Angular2 both

<img src="{{imageUrl}}">

and the equivalent of ngSrc

<img [src]="imageUrl">

the small broken image icon is still displayed as an image placeholder if imageUrl is empty.

What is the actual difference there?

Answer 1

You can conditionally add yoursimg using * ngIf

<img *ngIf="imageUrl" [src]="imageUrl">

Answer 2

The difference is just the semantics for your use case.

Using the interpolation option <img src="{{imageUrl}}">tells angular to place the value of imageUrl in this location. In your case, paste it into the property value src.

<img [src]="imageUrl"> angular src imageUrl.

Answer 3

[src]="imageUrl" - , imageUrl src. .

src="{{imageUrl}}" , {{}} , , imageUrl , src. , .

DomSanitizer [src]="..." , , {{}} .