Using ng-src with http get

Question

I have an image handler which fetches the image byte stream from DB and returns a http response Content-Type: image/jpeg

In my angularjs app I would like to get the images and show them in a table. Here is the page code:

<tr ng-repeat="product in products>
  <td>
     <img ng-src="{{imageMaker(product.id)}}"/>
  </td>
</tr>

Controller code:

$scope.imageMaker = function (productId) {
    $http.get('/Handlers/ImageRenderer.ashx', {
        params: {
            id: productId
        }
    }).then(function (res) {
        return 'data:image/jpeg;base64,' + res.data;
    });
}

by running this code Chrome crashes. Any help would be appreciated.

yes. I tried the following approach as well. stackoverflow.com/questions/16775729/… — Ryan
– Ryan, Commented Apr 15, 2015 at 17:09
have a look at this question pretty similar to your case stackoverflow.com/questions/29104607/… — rakesh
– rakesh, Commented Apr 15, 2015 at 17:30

Dylan Watt · Accepted Answer · 2015-04-15 18:37:50Z

Your ng-src is set to the return of $scope.imageMaker. However, your implementation of that doesn't return anything (and thus returns undefined). Even if you were returning the promise, ng-src expects the expression to evaluate to a string which is then set as the src attr. It's not expecting a promise object that then eventually returns a string on success.

Personally, I'd either make a custom directive, when in the link function you go off and make your async call and then set the .src of the element on success.

.directive('myImg', function($http){
    return{
       scope:{imageId:'@myImg'},
       link: function(s,e,a){

            $http.get('/Handlers/ImageRenderer.ashx', {
                params: {
                    id: s.imageId
                }
            }).then(function (res) {
                e.src('data:image/jpeg;base64,' + res.data);
            });

      }  
    }
})

HTML:

<tr ng-repeat="product in products>
  <td>
     <img my-img="{{product.id}}"/>
  </td>
</tr>

As a side note base64 is ~30% less efficient than just using real image resources.

user4978243 · Accepted Answer · 2015-11-03 15:11:40Z

0

This worked for me (based off of Dylan's answer):

.directive('myImg', function($http) {
    return {
        link: function(s, e, a) {
            $http.get('/Handlers/ImageRenderer.ashx', {
                params: {
                    id: s.imageId
                }
            }).then(function(res) {
                e[0].src = 'data:image/jpeg;base64,' + res.data;
            });
        }
    };
}

answered Nov 3, 2015 at 15:11

user4978243

Collectives™ on Stack Overflow

Using ng-src with http get

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related