在 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