如何以角度显示图像？

Question

如何以角度显示图像？

<div><img  class="images" ng-src="{{./resources/img/new.png}}"/></div>

<div><img  class="images" src="./resources/img/new.png"/></div>```

Answer 1

学习角度模板绑定（https://angular.io/guide/template-syntax）。如果您在本地有图像（例如（./resources/img/new.png）），您可以使用普通的 html 源标记

<img  class="images" src="./resources/img/new.png"/>

或者您的图像来自服务器或动态，此时您必须像这样绑定

img = this.imageSource
<img  class="images" src={{img}}/> or
<img class="images" [src]="img"/>

Answer 2

Angular CLI 如何处理图像

还记得我们什么时候使用过npm run buildorng build --prod命令吗？Angular CLI 将我们的所有资源移至该dist文件夹中。当它看到资产文件夹中有图像时，它也会执行相同的操作。

我们所要做的就是使用从 src 文件夹开始的路径在模板中引用这些图像。

例如，如果我们有一个图像，src/assets/img/logo.png,我们会将其添加到我们的模板中：

模板： <img src="assets/img/logo.png"> 将图像添加到资产文件夹 Angular CLI 为我们生成的资产文件夹是用于存储图像的完美位置。

让我们从 angular.io 获取 Angular 徽标。

https://angular.io/assets/images/logos/angular/logo-nav@2x.png