AngularJS ng src Directive

In this article, you will learn about AngularJS ng Src directive.

Overview

In earlier articles, we saw how to create modules and controller in Angular JS. Also, we saw about the controllers in AngularJS. For more, kindly refer  to the links of the articles, given below:

In this article, we will see how ng-Src directive works in AngularJS .

Introduction

Using a binding expression with an image source attribute results in a 404 error. Let's see an example of how it results in 404 error.

We will be continuing with the previous example.

I have a div tag. Whatever changes; we are going to do; and we will do in this tag.

code

Now, just add the Images folder and paste any image in this folder.

folder

An image is called Akshay.jpg.

Now, I want to display this image on a page.

Now we have to use <img> tag to display an image.

code

Now, let's run the solution and let's see what output we will get.

output
When you click F12, you will see an error at the top.

error

What it says:

error

Failed to load response 404 error.

We should get Akshay image. Now, we had harcoded the value of an image source element i.e:

  1. <img src="Images/Akshay.jpg" style="height:100px; width:200px " />  
Now, I have to set it dynamically, using Angular JS . To do this, we use the previous example script here.

Flip to Visual Studio and see this part:

code

I had made a JavaScript file and named it as mytest.js. We will use this to display an image dynamically, using Angular JS.

Now, when you see this js file carefully, we made module and controller successfully .

Here, I had made an employee object and displayed its firstname, lastname, and address and in this, I will assign that object to a $scope .
  1. var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {  
  2.     var employee = {  
  3.         firstName: "Akshay",  
  4.         lastName: "Phadke",  
  5.         Address: "Mumbai ",  
  6.         Image: "Images/Akshay.jpg"  
  7.     };  
  8.     $scope.employee = employee;  
  9. });  
I had added a path of Akshay image and we will write it in ASPX page with the help of binding the expression. Now, we will switch back to ASPX page and will display employee various details.

Now, in our ASPX page, we want to display: 
  • FirstName 
  • LastName
  • Address 
  • Image
We will bind these with the binding expression:

Firstname : {{ employee.firstName}}
LastName : {{employee.lastName}}
Address : {{employee.Address}}

Now, again we will just bind that image with the help of the binding expression.
  1. <img src="{{employee.Image}}" style="height:100px; width:200px " />  
Our final code will be:

code
Now, let's run the solution and see what output we will get. 

output
Now, in the output, given above, we got various details also. We got an image but when you click F12 again, you will see the same error.

output

Now, the image has loaded fine, but why we are getting 404 error?

We used a binding expression with an image source attribute:
  1. <img src="{{employee.Image}}" style="height:100px; width:200px " />  
Now, we get a  404 error because DOM parsed a request, which is issued to a Server. Here, our Visual Studio Server actually gets two requests i.e. from an ASPX page and also from an our JS file. If you have a Fiddler, you can see in the traffic, the requests that got generated.

Now, these requests are generated from ASPX page. When a page is loaded, DOM is parsed and it looks for the binding expression. In this case, it's an image.

="{{employee.Image}}"

It looks for the binding expression first {{}}, the object and then the path. If it does not find the right path, it generates 404 error here.

Now, the question arises. If it is returning the 404 error, how is the image displayed as DOM is parsed to the Servers and it makes two requests, where the first is given below:
  1. <img src="{{employee.Image}}" style="height:100px; width:200px " />  
The second is given below:

Image : "Images/Akshay.jpg"

It is the one, that we had specified in our controller.

From here, the actual image is getting displayed

Now, we are going to use ng-Src directive. ng-Src directive ensures that a request is issued only after AngularJS has evaluated a binding expression.

Src is going to be written as ng-Src.

Thus, our final code is given below:
  1. <div >  
  2.   
  3.    Firstname : {{ employee.firstName}}  
  4.    LastName : {{employee.lastName}}  
  5.    Address : {{employee.Address}}  
  6.    <img ng-src="{{employee.Image}}" style="height:100px; width:200px " />  
  7.   
  8.   
  9. </div>  
Hence, let's run our solution and see what output we will get and if we get any warnings or errors.

output

As you can see in the output, given above, we got the expected output and we didn’t get any errors also.

output

We didn’t get any error or warnings.

If you have Fiddler, you can observe the traffic and see that it has made only one request.

Conclusion: This was about ng-Src directive in AngularJS. I hope this article was helpful.