2 GET method forming for a single resource in AngularJS image fetch

Question

Following is my AngularJS table code, which is filling the trs like -

<tbody class="no-bd-y">
  <tr ng-repeat="emp in empData">
    <td>{{emp.first_name}}</td>
    <td>{{emp.last_name}}</td>
    <td><img src="{{siteurl}}:3030/public/{{emp.prof_image}}" width="120" height="120" ng-if="emp.prof_image" class="img-responsive"></td>
  </tr>
</tbody>

Now the problem is when I firebug the page, 2 URLs are formed for every image -

http://example.com:8000/%7B%7Bsiteurl%7D%7D:3030/public/%7B%7Bemp.prof_image%7D%7D

http://example.com:3030/public/a1419c564308370f8d4817b7885ce031.png

Console -

Going On

As you can see now, every image is forming 2 GET and as previous one is not correct the page load time increase. Let me know how could I fix this problem ?

EDIT

Following is my controller code -

angular.module("app").controller("MyController", function($scope, $location, SessionService, $http) {
    $scope.user = SessionService.currentUser;
    $scope.siteurl = $location.absUrl().split(":8000/")[0];

    // Get user listing
    $http.get("/api/getempl").then(function(response){
        if (response.status == 200) {
            console.log(response.data.data);
            $scope.empData = response.data.data;       
        }
        else {
            console.log('400');
        }
    });

});

Try to make this function inside module app and return the result like it explained here stackoverflow.com/questions/18184026/… — Vladimir
– Vladimir, Commented Sep 8, 2014 at 9:56

Jason Goemaat · Accepted Answer · 2014-09-08 09:55:57Z

2

You are using src directly, and since angular doesn't run before the dom is ready it is trying to fetch the src. Use ng-src instead which doesn't set the src attribute until angular can process it.

<img ng-src="{{siteurl}}:3030/public/{{emp.prof_image}}"...

answered Sep 8, 2014 at 9:55

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trialcoder Over a year ago

Wow ..this fixed my problem..+1 and a green tick

bmazurek · Accepted Answer · 2014-09-08 09:55:12Z

1

Try to use ng-src, it should help

answered Sep 8, 2014 at 9:55

bmazurek

1694 bronze badges

Collectives™ on Stack Overflow

2 GET method forming for a single resource in AngularJS image fetch

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related