Angular-js

How to display an image using angularjs ng src?

How to display an image using angularjs ng src?, someone asked me to explain?
By:

In this article, I will show you how to display image in angularjs ng src. In html document  you should display an image using <img> tag element using the src attribute. In Angular use ng-src attribute to bind the image.

The Angular markup {{mc.ImageUrl}} in a src does not work right. The browser will fetch from the URL with the literal text Until the AngularJs expression replaces inside the {{mc.ImageUrl}}. The angular ng-src resolves this problem.

HTML Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            'usestrict';
 
            angular
               .module('app', [])
               .controller('myController',myController);
 
            function myController() {
                var mc = this;
                mc.ImageUrl = "http://www.google.com/logos/doodles/2016/first-day-of-school-2016-5187470943584256-hp.jpg";
            }
        })();
    </script>
</head>
<body ng-app="app">
    <h2>Display image in AngularJS using ng-src directive</h2>
    <div ng-controller="myControlleras mc">
        <img alt="" ng-src="{{mc.ImageUrl}}" />
    </div>
</body>
</html>

 

angularjs image src

Related Article

Post your comments / questions



Recent Article