Afficher l'image dans AngularJS
Nous présenterons comment ajouter des images dans AngularJS avec des exemples.
Afficher l’image dans AngularJS
Les images sont la partie la plus importante de toute application Web ou site Web. Nous utiliserons la directive ng-src pour ajouter une seule image.
Nous discuterons de l’affichage d’une image dans la directive ng-repeat dans AngularJS. L’ordre ng-src est utilisé avec des éléments d’image pour afficher les images du modèle dans AngularJS.
L’image sera conservée dans un dossier sur le serveur. Et cela sera affiché en définissant le chemin de l’image sur la directive ng-src dans AngularJS.
Prenons un exemple et affichons une seule image en utilisant la directive 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>
Production:
Comme vous pouvez le voir dans l’exemple ci-dessus, il est assez simple d’ajouter une image dans l’application AngularJS.
Afficher plusieurs images dans AngularJS
Passons maintenant à un autre exemple et essayons d’ajouter plusieurs images à partir de JSON.
Le balisage HTML ci-dessous contient un HTML div auquel les directives ng-app et ng-controller ont été données. Le div HTML contient un bouton HTML et un tableau composé d’éléments d’image qui seront réglés à partir du tableau JSON à l’aide de la directive ng-repeat.
Le bouton a reçu la directive ng-click. La fonction de table générale du contrôleur est nommée lorsque le bouton est cliqué.
Les objets JSON sont créés et alloués au tableau JSON consommateur avec la fonction de table générale.
L’objet JSON contient les champs consumerId, Name et Photo. Le champ Photo fournit l’URL de l’image.
Le nom de la directive ng-repeat implique l’élément en fonction de la longueur de la collection.
Dans ce système, il répétera l’élément tr. L’élément tbody du HTML a été nommé directive ng-repeat pour répéter à travers tous les éléments du tableau JSON consommateur.
Un élément tr est développé et ajouté dans le tableau HTML pour chaque objet JSON dans le tableau JSON consumer. Le champ Photo sera attribué à la directive ng-src, qui lira l’URL de l’image à partir du modèle et affichera l’image, comme indiqué ci-dessous.
# 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>
Production:
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