在angular2中插入相對路徑的圖像

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

而不是在綁定之前聯系完整路徑

例如：

public fullPath:string;
public myPicture:string;

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

HTML

 <img [src]="fullPath" />

Answer 2

你只需要混合“和”。

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

而已。 快速簡便的修復。

Answer 3

屬性綁定允許您將屬性綁定到表達式。 你可以在這里閱讀模板表達式： https ： //angular.io/docs/ts/latest/guide/template-syntax.html#!# template-expressions

一般來說，你可以放在右側的是用於插值的花括號，所以{{expression}}，在這種情況下你不能使用插值。 因此，您需要在組件的屬性中擁有映像的路徑，然后直接將[src]綁定到您的屬性。 喜歡：

<img [src]="propertyWithPathFromComponent" />

萬一你仍然會以這種方式插入字符串，你可以去：

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