How to display an image using angularjs ng src?

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

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="">
    <script src="//"></script>
    <script type="text/javascript">
        (function () {
               .module('app', [])
            function myController() {
                var mc = this;
                mc.ImageUrl = "";
<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}}" />


angularjs image src

Post your comments / questions