Force HTTP interceptor in dynamic ngSrc request

Based on Michal's answer the directive could look like the below

app.directive('httpSrc', [
        '$http', function ($http) {
            var directive = {
                link: link,
                restrict: 'A'
            };
            return directive;

            function link(scope, element, attrs) {
                var requestConfig = {
                    method: 'Get',
                    url: attrs.httpSrc,
                    responseType: 'arraybuffer',
                    cache: 'true'
                };

                $http(requestConfig)
                    .then(function(response) {
                        var arr = new Uint8Array(response.data);

                        var raw = '';
                        var i, j, subArray, chunk = 5000;
                        for (i = 0, j = arr.length; i < j; i += chunk) {
                            subArray = arr.subarray(i, i + chunk);
                            raw += String.fromCharCode.apply(null, subArray);
                        }

                        var b64 = btoa(raw);

                        attrs.$set('src', "data:image/jpeg;base64," + b64);
                    });
            }

        }
    ]);

You would then use it as follows

<img http-src="www.test.com/something.jpeg">

As said here you can use angular-img-http-src (bower install --save angular-img-http-src if you use Bower).

If you look at the code, it uses URL.createObjectURL and URL.revokeObjectURL which are still draft on 19 April 2016. So look if your browser supports it.

In order to use it, declare 'angular.img' as a dependency to your app module (angular.module('myapp', [..., 'angular.img'])), and then in your HTML you can use http-src attribute for <img> tag.

In your example, you can write: <img http-src="/users/1/images/{{imageId}}">

This is a little old, but thought I would add another method for finding an image w/o using an interceptor. In my case, I needed to find the image path from the rails assets pipeline.

There was a blog from Codetunes (http://codetunes.com/2014/5-tips-on-how-to-use-angularjs-with-rails-that-changed-how-we-work/) that described how they find templates. This makes use of an interceptor but doesn't work for images.

The solution I used requires you to use a model for the ng-src value. Within the model, I call a helper method from a service that utilizes the Rails.templates variable setup from the above blog article.

So, it looks like the following:

angular.module('myApp').factory('RailsAssetService', function(Rails) {

    function RailsAssetService() {

    }

    RailsAssetService.getAssetsUrl = function(url) {
        var railsUrl = Rails.templates[url];
        if (railsUrl === undefined)
            railsUrl = url;
        return railsUrl;
    }

    return RailsAssetService;
});

and in the controller:

vm.creditCardsImage = RailsAssetService.getAssetsUrl('credit-cards-logo.gif');

and in the view:

<img ng-src="{{vm.creditCardsImage}}">