Learn AngularJS ng src Directive

Overview

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

• Modules And Controller In AngularJS
• Controllers in AngularJS

In this article, we will see how the 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 a 404 error.

We will be continuing with the previous example.

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

Now, just add the Images folder and paste any image in this 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.

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

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

What it says.

Failed to load response 404 error.

We should get Akshay's image. Now, we had hardcoded the value of an image source element i.e.

<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.

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 the module and controller successfully.

Here, I made an employee object and displayed its first name, last name, and address and in this, I will assign that object to a $scope.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
    var employee = {
        firstName: "Akshay",
        lastName: "Phadke",
        Address: "Mumbai ",
        Image: "Images/Akshay.jpg"
    };
    $scope.employee = employee;
});

I added a path of Akshay's image and we will write it on the ASPX page with the help of binding the expression. Now, we will switch back to the ASPX page and will display employee various details.

Now, on 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.

<img src="{{employee.Image}}" style="height:100px; width:200px;" />

Our final code will be.

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

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

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

We used a binding expression with an image source attribute.

<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 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 the 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 a 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.

<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 the 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.

<p>
    Firstname: {{ employee.firstName }}
    LastName: {{ employee.lastName }}
    Address: {{ employee.Address }}
    <img ng-src="{{ employee.Image }}" style="height:100px; width:200px" />
</p>

Hence, let's run our solution and see what output we will get and if we get any warnings or errors.

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

We didn’t get any errors or warnings.

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

Conclusion

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