AngularJS で画像を表示する
AngularJS に画像を追加する方法を例を挙げて紹介します。
AngularJS で画像を表示する
画像は、Web アプリケーションまたは 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 マークアップには、ng-app および ng-controller ディレクティブが指定された HTMLdiv が含まれています。HTMLdiv には、ng-repeat ディレクティブを使用して JSON 配列から決済される画像要素で構成される HTML ボタンとテーブルが含まれています。
ボタンには ng-click ディレクティブが与えられています。コントローラの一般的なテーブル機能は、ボタンがクリックされると名前が付けられます。
JSON オブジェクトが作成され、一般的なテーブル関数を使用してコンシューマーJSON 配列に割り当てられます。
JSON オブジェクトには、consumerId、Name、および Photo フィールドが含まれています。写真フィールドは、画像の URL を提供します。
ng-repeat ディレクティブ名は、コレクションの長さに基づく要素を意味します。
このシステムでは、tr 要素を繰り返します。HTML の tbody 要素は、コンシューマーJSON 配列のすべての項目を繰り返すための ng-repeat ディレクティブに指定されています。
tr 要素が開発され、consumerJSON 配列内の各 JSON オブジェクトの 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