angular http: how to call images with custom headers?

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 it would be: <img http-src="{{element.image.url}}">

Of course, this implies that you have declared an interceptor using $httpProvider.interceptors.push to add your custom header or that you've set statically your header for every requests using $http.defaults.headers.common.MyHeader = 'some value';

There is a vary simple answer for that. You should use: angular-img-http-src.

Problem:

You used token based auth and you need to serve images from secured routes.

Solution:

Use http-src instead of ng-src and it will fetch images using the $http service - meaning Authorization headers added via interceptors will be present - then build a Blob and set the src to an objectURL.

It works perfectly on my project.

I am facing the same problem.The best solution I found is passing the Authorization token as a query parameter.

For example :

<img src="http://myhost.com/image/path?accessToken=123456789" >

This way you can secure those images only for your REST consumers.