How To Assign Src To Images Dynamically In AngularJS ( Differcen Between src And ng-src In AngularJS )
Here we describe how to bind Images dynamically in AngularJS.
First of all we have to create a complex object for Images as shown below.
It mainly contains ID, Name and Path for binding the Images.
Now for assigning src to Image, we use ng-src directive in AngularJS.
ng-src is the right approach to assign source path to images in AngularJS.
Now lets consider how ng-src differ from normal src in image.
When we use src in AngularJS, the browser make two request to the server.
The first request for image path would result in HTTP Error 404 Not Found.
This is due to, as soon as the DOM is parsed, the Angular expressions are not evaluated.
Hence the image src cannot find any image at the specifed location.
We get HTTP Error 404 Not Found.
When the Angular expression for binding the image is evaluated, a second request is made.
Only on second attempt, the images are loaded fully.
That means we need two request for loading images when src is used.
We can overcome this issue by using ng-src instead of src.