How to override angular ngSrc directive to append request header?

Question

I want to append a authentication token to the angular js ngSrc url request. So how can I pass this token with ngSrc directive?

Answer 1

ngSrc is not using $http internally, so the interceptor alone will not work. It just sets the src-attribute. From my point of view you will have to write a custom directive like"ngHttpSrc", which is using the $http services.

see: Force HTTP interceptor in dynamic ngSrc request

Answer 2

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.

Reference:https://github.com/dougmoscrop/angular-img-http-src

Answer 3

Like JB mentioned in comments, use an interceptor

// alternatively, register the interceptor via an anonymous factory
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
  return {
    'request': function(config) {
      // manipulate the request here
      // You can filter specific requests if you want
      config.headers.token ="whatever";
      return config;
    }
  };
});