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指令只控制img的常用src属性，这使浏览器像任何其他图像一样请求图像，而不是通过Javascript，所以我不认为这可以是截获。

但是，您可以做的是编写一个新指令，保存httpSrc。然后，这可以使用对$http的调用来获取图像，然后使用类似Using raw image data from ajax request for data URI的内容创建带有响应的数据URI（虽然我不确定浏览器是否支持它）。

Answer 3

正如here所述，如果您使用angular-img-http-src，则可以Bower使用bower install --save angular-img-http-src。

如果您查看the code，则会在2016年4月19日URL.createObjectURL使用URL.revokeObjectURL和still draft。所以look if your browser supports it。

要使用它，请将'angular.img'声明为您的应用模块（angular.module('myapp', [..., 'angular.img'])）的依赖关系，然后在HTML中，您可以使用http-src属性<img>标签

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

Answer 4

这有点旧，但我想我会添加另一种使用拦截器查找图像的方法。在我的例子中，我需要从rails资产管道中找到图像路径。

来自Codetunes（http://codetunes.com/2014/5-tips-on-how-to-use-angularjs-with-rails-that-changed-how-we-work/）的博客描述了他们如何找到模板。这使用了拦截器，但对图像不起作用。

我使用的解决方案要求您使用ng-src值的模型。在模型中，我从一个使用上述博客文章中的Rails.templates变量设置的服务调用一个帮助器方法。

所以，它看起来如下：

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

并在控制器中：

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

并在视图中：

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

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

4 个答案: