Bild in AngularJS anzeigen
Wir werden anhand von Beispielen vorstellen, wie man Bilder in AngularJS hinzufügt.
Bild in AngularJS anzeigen
Bilder sind der wichtigste Teil jeder Webanwendung oder Website. Wir werden die Direktive ng-src verwenden, um ein einzelnes Bild hinzuzufügen.
Wir werden das Anzeigen eines Bildes innerhalb der Direktive ng-repeat in AngularJS besprechen. Die Reihenfolge ng-src wird zusammen mit Bildelementen verwendet, um Bilder aus dem Modell in AngularJS anzuzeigen.
Das Bild wird in einem Ordner auf dem Server gespeichert. Und es wird angezeigt, indem der Pfad des Bildes auf die Direktive ng-src in AngularJS gesetzt wird.
Lassen Sie uns ein Beispiel durchgehen und ein einzelnes Bild mit der Direktive ng-src anzeigen.
# 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>
Ausgabe:
Wie Sie im obigen Beispiel sehen können, ist es ganz einfach, ein Bild innerhalb der AngularJS-Anwendung hinzuzufügen.
Zeigen Sie mehrere Bilder in AngularJS an
Lassen Sie uns nun ein weiteres Beispiel durchgehen und versuchen, mehrere Bilder aus JSON hinzuzufügen.
Das folgende HTML-Markup enthält ein HTML-div, dem die Direktiven ng-app und ng-controller gegeben wurden. Das HTML div enthält eine HTML-Schaltfläche und eine Tabelle, die aus Bildelementen besteht, die mit der Direktive ng-repeat aus dem JSON-Array abgerechnet werden.
Dem Button wurde die Direktive ng-click gegeben. Die allgemeine Tabellenfunktion des Controllers wird benannt, wenn auf die Schaltfläche geklickt wird.
Mit der allgemeinen Tabellenfunktion werden JSON-Objekte erstellt und dem Consumer-JSON-Array zugewiesen.
Das JSON-Objekt enthält die Felder consumerId, Name und Photo. Das Feld Foto liefert die URL des Bildes.
Der Direktivenname ng-repeat impliziert das Element basierend auf der Länge der Sammlung.
In diesem System wird das Element tr wiederholt. Das tbody-Element des HTML wurde zur ng-repeat-Direktive ernannt, um alle Elemente des Verbraucher-JSON-Arrays zu wiederholen.
Für jedes JSON-Objekt im JSON-Array consumer wird ein tr-Element entwickelt und an die HTML-Tabelle angehängt. Das Feld Photo wird der Direktive ng-src zugewiesen, die die Bild-URL aus dem Modell liest und das Bild wie unten gezeigt anzeigt.
# 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>
Ausgabe:
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