如何在Angular JS中加载本地图像？

Question

我刚开始使用 AngulerJs ，我想从子文件夹加载图片。

这是我的控制器代码：。

JkMount

这是我ProxyPass中的代码：

$scope.img_source = "../WebContent/Welcom2Iquote.gif";

Answer 1

使用图像标记，就像用于放置普通html图像的图像一样

<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source">

Answer 2

你可以这样做

$scope.img_source = "../WebContent/Welcom2Iquote.gif";

如果您是图像路径的范围变量，则可以使用ng-src在html中绑定图像，如下所示

<img ng-src="{{ img_source }}" />

Answer 3

如果您使用的是angular-cli，则解决方案中应该有一个assets文件夹。 将要加载的图像放入此文件夹。

现在在whatever-component.html页面上插入此行 <img src="assets/{{img_source}}" alt="img_source" title="img_source">

{{}}要求您在与img_source文件对应的打字稿文件中定义whatever-component.html。

所以在那里定义图片的名称： public img_source: string = 'yourpicture.jpg';