Mostrar imagen en AngularJS
Presentaremos cómo agregar imágenes en AngularJS con ejemplos.
Mostrar imagen en AngularJS
Las imágenes son la parte más importante de cualquier aplicación web o sitio web. Usaremos la directiva ng-src para agregar una sola imagen.
Discutiremos la visualización de una imagen dentro de la directiva ng-repeat en AngularJS. El orden ng-src se usa junto con elementos de imagen para mostrar imágenes del modelo en AngularJS.
La imagen se mantendrá en una carpeta en el servidor. Y se mostrará configurando la ruta de la imagen a la directiva ng-src en AngularJS.
Veamos un ejemplo y mostremos una sola imagen usando la directiva 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>
Producción:
Como puede ver en el ejemplo anterior, es bastante simple agregar una imagen dentro de la aplicación AngularJS.
Mostrar múltiples imágenes en AngularJS
Ahora, veamos otro ejemplo e intentemos agregar varias imágenes de JSON.
El siguiente marcado HTML contiene un HTML div al que se le han dado las directivas ng-app y ng-controller. El HTML div contiene un botón HTML y una tabla que consta de elementos de imagen que se establecerán desde la matriz JSON utilizando la directiva ng-repeat.
Al botón se le ha asignado la directiva ng-click. La función de tabla general del controlador se nombra cuando se hace clic en el botón.
Los objetos JSON se crean y asignan a la matriz JSON del consumidor con la función de tabla general.
El objeto JSON contiene los campos consumerId, Name y Photo. El campo Photo proporciona la URL de la imagen.
El nombre de la directiva ng-repeat implica el elemento en función de la longitud de la colección.
En este sistema repetirá el elemento tr. El elemento tbody del HTML se ha designado como directiva ng-repeat para repetir todos los elementos de la matriz JSON del consumidor.
Se desarrolla un elemento tr y se agrega a la tabla HTML para cada objeto JSON en la matriz JSON consumer. El campo Photo se asignará a la directiva ng-src, que leerá la URL de la imagen del modelo y mostrará la imagen, como se muestra a continuación.
# 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>
Producción:
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