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

你只需要混合使用＆＃34;和＆＃39;。

<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}}" />