角度2の相対パスで画像を挿入

Question

私はangular2に画像を挿入しようとしています。 私の画像の名前はmypictureという変数に保存されています。 このようにして<img [src]="../../../public/img/{{mypicture}}" />を試しましたが、うまくいきませんでした。私は、コンソールでこのエラーが表示さ

：

Error: Uncaught (in promise): Template parse errors: 
Parser Error: Got interpolation ({{}}) where expression was expected 

Answer 1

の代わりに例えば

を結合する前に、その 接触フルパスをやって：あなたはまだ文字列をこのように補間するでしょう

<img [src]="propertyWithPathFromComponent" /> 

念のために、あなたがのために行くことができます：

public fullPath:string; 
public myPicture:string; 

getMyPicture(){ 
    this.fullPath = "../../../public/img/"+ this.myPicture; 
} 

HTML

Answer 2

プロパティバインディングを使用すると、式にプロパティをバインドすることができます。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions

一般的に言えば、右手に置くことができるのは補間の中括弧に入れられるものなので{{式}}、この場合補間は使用できません。そのため、コンポーネントのプロパティに画像のパスを設定し、[src]をプロパティに直接バインドする必要があります。同様に：

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

Answer 3

「と」の組み合わせが必要です。

<img [src]="'../../../public/img/' + mypicture" /> 

これだけです。 すばやく簡単に修正できます。