Angular - srcまたは[src]で使用する方が良い

Question

Angular、standard html srcまたはAngular [src]と一緒に使うことをおすすめしますか？なぜ？

編集：私は私のHTMLコンポーネントのコードを次ています

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

それは大丈夫ですか？そうでない場合は、[src]と一緒に動作させるにはどのように変更する必要がありますか？

編集2：プレーンhtmlの代わりに他にも、より良い方法がありますかsrc？これは実際には最高のソリューションですか？

Answer 1

[...]="..."はオブジェクトバインディング用です...="{{...}}"は文字列補間でバインドするためのものです。文字列をバインドする場合は、使用する文字列は関係ありません。オブジェクトまたは配列の値をバインドする場合は、 `[...] =" ... "を使用する必要があります。それ以外に、それはあなた次第です。

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

が全くAngular2に関連していない、単なるHTML（無[]なし{{}}）をthatsの。 []をsrcの周りに追加すると、Angularは../app/media/appLogo.pngを式として扱いますが、これは明らかではありません。

0xは、値が文字列でなくオブジェクトであり、{{}}を使用すると無効な方法で文字列化されるため、必須です。

Answer 2

通常の使用srcは、設定値[src]がプロパティを設定する属性を設定します。イメージ（私があなたがイメージについて話していると仮定しているとしますが、あなたが言うことはしないと仮定します）については、srcアトリビュートが対応するプロパティを設定するために使用されます。

[src]を使用する大きな理由の1つがあります。ブラウザは、htmlの解析中にsrc属性に入れたものをダウンロードし始めます。

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

のブラウザでは、多くの場合、すぐにコンソールで404につながる{{myImgSrc}}を、ダウンロードを開始します：だから、あなたがこれを行うと言うことができます。以下を使用すると、わずかに優れ、そのためである。

<img [src]="myImgSrc"/> 

Answer 3

あなたは、静的なアンカーリンクを持っている場合は、

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

コンポーネントから結合すると、その後、下記のいずれかが動作すると先に行きます。 component.ts

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