javascript - What's better to use in Angular - src or [src] - Stack Overflow

admin管理员组

文章数量:1221301

Just want to ask what is recommended to use with Angular, standard html src or Angular [src]? And why?

Edit: I have following code in my html component:

<img class="logo" src="../app/media/appLogo.png">

It is fine? If not, how should I change it to work together with [src]?

Edit2: Is there any other, better way to do it, instead of plain html src? Or this is the best solution actually?

Just want to ask what is recommended to use with Angular, standard html src or Angular [src]? And why?

Edit: I have following code in my html component:

<img class="logo" src="../app/media/appLogo.png">

It is fine? If not, how should I change it to work together with [src]?

Edit2: Is there any other, better way to do it, instead of plain html src? Or this is the best solution actually?

• javascript
• angular
• typescript

Share Improve this question Follow edited Nov 1, 2017 at 9:29 craig 5,01611 gold badge2424 silver badges4040 bronze badges asked Jan 2, 2017 at 12:35 user7209780user7209780 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 9

[...]="..." is for object binding ...="{{...}}" is for binding with string interpolation. If you want to bind a string it doesn't matter what you use. If you want to bind an object or array value you need to use `[...]="...". Besides that it's entirely up to you.

<img class="logo" src="../app/media/appLogo.png">

Is not related to Angular2 at all, thats just plain HTML (no [] and no {{}}). If you add [] around src, then Angular will treat ../app/media/appLogo.png as an expression, which it clearly isn't.

When DomSanitizer is used [src]="..." is mandatory because the value no longer is a string, but an object and using {{}} would stringify it in an invalid way.

Using regular src sets the Attribute where setting [src] sets the property. Considering that for an image (I assume you're talking about an image but you don't say) the src attribute is used to set the corresponding property they will both work.

There is one big reason to use [src] though. Browsers tend to start downloading whatever you put in the src attribute while parsing the html. So lets say you do this:

<img src="{{myImgSrc}}"/>

The browsers will often immediately start downloading {{myImgSrc}}, which will lead to a 404 in the console. Using the following is therefor slightly better:

<img [src]="myImgSrc"/>

If you have static anchor link, then go ahead with

<img class="logo" src="../app/media/appLogo.png">

When binding from the component, then either of the below will work.

<img class="logo" [src]="image_src">
<img class="logo" src="{{ image_src }}">

In component.ts

image_src: string = '../app/media/appLogo.png';

本文标签： javascriptWhat39s better to use in Angularsrc or srcStack Overflow