如何覆盖 angular ngSrc 指令以附加请求 header？

Question

我想将身份验证令牌附加到 angular js ngSrc url 请求。那么如何使用 ngSrc 指令传递此标记？

Answer 1

像评论中提到的JB，使用一个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;
    }
  };
});

Answer 2

ngSrc 没有在内部使用 $http，所以单独使用拦截器是行不通的。它只是设置 src 属性。从我的角度来看，您将不得不编写一个自定义指令，如 "ngHttpSrc"，它使用 $http 服务。

参见：

Answer 3

使用 http-src 而不是 ng-src，它将使用 $http 服务获取图像 - 这意味着将存在通过拦截器添加的授权 headers - 然后构建一个 Blob 并设置src 到 objectURL。

参考：https://github.com/dougmoscrop/angular-img-http-src

如何覆盖 angular ngSrc 指令以附加请求 header？

How to override angular ngSrc directive to append request header?

angularjs

x-http-method-override

angularjs-directive