在 AngularJS 中显示图像
我们将通过示例介绍如何在 AngularJS 中添加图像。
在 AngularJS 中显示图像
图像是任何 Web 应用程序或网站中最重要的部分。我们将使用 ng-src 指令添加单个图像。
我们将讨论在 AngularJS 的 ng-repeat 指令中显示图像。ng-src 顺序与图像元素一起使用，以在 AngularJS 中显示来自模型的图像。
图像将保存在服务器上的文件夹中。它将通过将图像的路径设置为 AngularJS 中的 ng-src 指令来显示。
让我们通过一个示例并使用 ng-src 指令显示单个图像。
# AngularJS
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngApp', [])
app.controller('ngController', function ($scope) {
});
</script>
<div ng-app="ngApp" ng-controller="ngController">
<img alt="" ng-src="https://www.delftstack.com/ezoimgfmt/d33wubrfki0l68.cloudfront.net/7748c5aa61aa13fd4c346e3cbfebe49f2dd4d580/2738b/assets/img/logo.png?ezimgfmt=rs:187x36/rscb5/ng:webp/ngcb5"/>
</div>
</body>
</html>
输出：
从上面的示例可以看出，在 AngularJS 应用程序中添加图像非常简单。
在 AngularJS 中显示多个图像
现在，让我们通过另一个示例并尝试从 JSON 添加多个图像。
下面的 HTML 标记包含一个 HTML div，已为其提供 ng-app 和 ng-controller 指令。HTML div 包含一个 HTML 按钮和由图像元素组成的表格，这些元素将使用 ng-repeat 指令从 JSON 数组中解决。
该按钮已被赋予 ng-click 指令。当按钮被点击时，控制器的通用表格函数被命名。
使用通用表函数创建 JSON 对象并将其分配给消费者 JSON 数组。
JSON 对象包含 consumerId、Name 和 Photo 字段。Photo 字段提供图像的 URL。
ng-repeat 指令名称暗示基于集合长度的元素。
在这个系统中，它将重复 tr 元素。HTML 的 tbody 元素已被指定为 ng-repeat 指令以重复消费者 JSON 数组的所有项目。
为 consumer JSON 数组中的每个 JSON 对象开发一个 tr 元素并将其附加到 HTML 表中。Photo 字段将分配给 ng-src 指令，该指令将从模型中读取图像 URL 并显示图像，如下所示。
# AngularJS
<html>
<head>
<title>Consumers</title>
</head>
<style>
td{
border: 1px solid black;
}
</style>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngApp', [])
app.controller('ngController', function ($scope) {
$scope.IsVisible = false;
$scope.GetData = function () {
$scope.consumer= [
{ consumerId: 1, Name: "Google", Photo: "Images/1.jpg" },
{ consumerId: 2, Name: "Delft Stack", Photo: "Images/2.jpg" },
{ consumerId: 3, Name: "Yahoo", Photo: "Images/3.jpg" },
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="ngApp" ng-controller="ngController">
<input type="button" value="Get Data" ng-click="GetData()" />
<hr />
<table cellpadding="0" cellspacing="0" ng-show="IsVisible">
<tr>
<th>Company Id</th>
<th>Name</th>
<th>Logo</th>
</tr>
<tbody ng-repeat="m in consumer">
<tr>
<td>{{m.consumerId}}</td>
<td>{{m.Name}}</td>
<td><img alt="{{m.Name}}" ng-src="{{m.Photo}}"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
输出：
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn