Question

如何以角度显示图像？


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

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

Answer 1

为您的问题考虑简单易用的解决方案。

更复杂的代码会进一步造成混乱。

Angular js文件：

$scope.imageAddress='resources/img/new.png';

// The Path has to be exact.
// Check your project folder hierarchy for that.

HTML文件：

<body ng-app = "myApp">
    <div ng-controller="myController">
        <img alt="" ng-src="{{ imageAddress }}" />
    </div>
</body>

您的路径将取决于您编写图像源代码的HTML文件。

例如：-如果您的ng-src位于Index.html路径中： resources / index.html

，并且您的new.png位于路径中： resources / views / images / new.png

然后 $ scope.imageAddress ='views / images / new.png';

还有一件事： 优先使用ng-src而不是src。

Answer 2

了解角度模板绑定（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 3

Angular CLI如何处理图像

还记得我们何时使用npm run build或ng 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