在动态ngSrc请求中强制HTTP拦截器

Question

我创建了一个AngularJS应用程序,用于从OAuth安全后端加载图像.通过向Angular $httpProvider添加额外的拦截器来配置我的OAuth库,以添加正确的身份验证标头.

我的HTML模板中的源代码如下所示:

<img ng-src="{{ '/users/1/images/' + imageId }}">

我的问题是实现ngSrc忽略了由指令创建的http请求$http,这导致具有错误身份验证的请求.普通的API调用函数是正确的(我的控制器/服务通过使用$http和$resource直接调用的函数).

Answer 1

根据Michal的回答,该指令可能如下所示

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);
                    });
            }

        }
    ]);

然后,您将按如下方式使用它

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

Answer 2

该ngSrc指令只是控制srcimg 的通常属性,这使得浏览器像任何其他图像一样请求图像,而不是通过Javascript,所以我不认为这可以被拦截.

但是,您可以做的是编写一个新指令,保存httpSrc.然后,这可以使用调用来获取图像$http,然后使用类似于使用来自ajax请求数据URI的原始图像数据来创建响应的数据URI(尽管我不确定浏览器是否支持它).

Answer 3

正如这里所说，您可以使用angular-img-http-src（bower install --save angular-img-http-src如果您使用Bower）。

如果你看一下代码，它使用了URL.createObjectURL和URL.revokeObjectURL其仍然起草于2016年4月19日因此，如果您的浏览器支持它的样子。

为了使用它，声明'angular.img'为对您的应用程序模块 ( angular.module('myapp', [..., 'angular.img']))的依赖，然后在您的 HTML 中您可以使用标签的http-src属性<img>。

在您的示例中，您可以编写： <img http-src="/users/1/images/{{imageId}}">