无法将图像的路径绑定到模板 - Angular

Question

我的代码是

<img *ngIf="photo" [src]="../../../../../../public/assets/images/2019-02-16T14:43:00.869Zpp1.jpg" alt="" class="img-responsive"/>

我正试图将图像的路径设置为src标签的img但我得到了

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Unexpected token . at column 1 in [../../../../../../public/assets/images/2019-02-16T14:43:00.869Zpp1.jpg] in ng:///ComponentsModule/SidebarComponent.html@5:8 ("
      <img
        *ngIf="photo"
        [ERROR ->][src]="../../../../../../public/assets/images/2019-02-16T14:43:00.869Zpp1.jpg"
        alt=""
     "): ng:///ComponentsModule/SidebarComponent.html@5:8

完整的想法是向具有userImgPath属性的用户文档发出GET请求到图像所在的位置。然后将它从src=""标签绑定到img。但我不能事先做这件事。我不知道什么是错的，那就是图像的路径。目录和图像已存在。

更新：

在pzaenger回答之后我得到了这个。

Answer 1

添加到@pzaenger提到的内容，您需要从正确的位置提供图像。如果您使用angular-cli生成了应用程序，则可以将图像放在src/assets文件夹中，并在[src]="'assets/photo.jpg'"等模板中使用

编辑：您可以修改angular.json or angular-cli.json（如果使用angular-cli生成）以更改在构建中添加到assets的文件夹。

Answer 2

使用''逃离路径：

<img *ngIf="photo" [src]="'../../../../../../public/assets/images/2019-02-16T14:43:00.869Zpp1.jpg'" alt="" class="img-responsive"/>

Answer 3

使用src insted [src]第二个用于字符串插值

例子：

<img src="assets/img/1.jpg" alt="image">

<img src='http://google.com/img/1.jpg' alt='image'>

<img [src]="imagePath" />

<img src={{imagePath}} />

编辑：如果应用程序内的那个路径应该是assets / images / imagename.jpg或./assets/images/imagename.jpg