loading image using ng-src

In angular when an image src is specified using expression as below

• <img src="{{ImageLocation}}" />

Most of the times it gives error in browser, because page is rendered and than angular expressions are executed so while rendering the src will not get path for image and hence gives error.

The solution for above problem is to use ng-src

Click here to check the output

Html Code

 <script src="angular.1.4.8.min.js"></script>  
 <div ng-app="MyApp">  
   <div ng-controller="MyController" >  
     <h1>{{Title}}</h1>  
     <hr />  
     <img ng-src="{{ImagePath}}" width="500" height="500"/>  
   </div>  
 </div>  
 <script src="index.js"></script>  

Angular Code

 var ngapp = angular.module("MyApp", []);  
 ngapp.controller("MyController", function ($scope) {  
   $scope.Title = "ng-src";  
   $scope.ImagePath = "apple.jpg";  
 });  

Click here to check the output