Knowledge Management Banner

Knowledge Management Banner

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


1 comment:

  1. No Deposit Bonus: Get free spins without risking your money
    We've got the 속초 출장안마 latest no deposit bonus offers for 전라남도 출장안마 US players: Risk Free Spins, Real Money No 군포 출장샵 Deposit Bonuses 인천광역 출장마사지 and no Deposit Bonus Offers! 창원 출장샵

    ReplyDelete

Powered by Blogger.