USING img src WITH Angular expression
app.js
var app = angular
.module('module1', [])
.controller("controller1", function ($scope) {
$scope.imgPath = "/images/avatar.jpg";
});
HTML
<html ng-app="module1">
<head>
<script type="text/javascript" src="angular.min.js"> </script>
<script type="text/javascript" src="app.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div ng-controller="controller1">
<img src="{{ imgPath }}" style="height:100px; width:200px" />
</div>
</body>
It will make 2 calls to server :
1. When the DOM is parsed, request goes to load the image, but unable to find image with in-evaluated Angular expressions {{ xyz }}
Shows error 404 in Dev tools
Not found : http://localhost:8080/%7B%7B%20imgPath%20%7D%7D
2. Load the image after evaluating the binding expression of Angular {{ xyz }}
USING img src WITH Angular expression
Just use ng-src instead of src attribute with img tag.
ng-src attribute ensures that the request is fired only after Angular binding expression is evaluated.
<img ng-src="{{ imgPath }}" style="height:100px; width:200px" />
No comments:
Post a Comment
Note: only a member of this blog may post a comment.