Захват HTTP-перехватчика в динамическом запросе ngSrc

Question

Я создал приложение AngularJS, которое загружает изображения с защищенного брандмауэра OAuth. Моя библиотека OAuth настраивается добавлением дополнительного перехватчика в Angular $httpProvider, чтобы добавить правильный заголовок проверки подлинности.

Мой исходный код в моем HTML шаблоне выглядит следующим образом:

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

Моя проблема заключается в том, что запрос HTTP, который создается ngSrc директива игнорируется $http реализации, что приводит к запросу с неправильная аутентификация. Нормальная функция API-вызовов корректна (те, которые вызываются моими контроллерами/услугами, используя $http и $resource).

Answer 1

Директива ngSrc просто управляет обычным атрибутом src для img, что заставляет браузер запрашивать изображение так же, как и любое другое изображение, а не через Javascript, поэтому я не думаю, что это можно перехватить.

Однако, что вы могли бы сделать, это написать новую директиву, сохранить httpSrc. Затем вы можете получить изображение с помощью вызова $http, а затем создать URI данных с ответом, используя что-то вроде Using raw image data from ajax request for data URI (хотя я не уверен в поддержке браузера для него).

Answer 2

Это немного старый, но я думал, что добавлю еще один способ поиска изображения без использования перехватчика. В моем случае мне нужно было найти путь изображения из конвейера ресурсов рельсов.

Был блог от 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}}"> 

Answer 3

На основании ответа 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 4

Как сказал here вы можете использовать angular-img-http-src (bower install --save angular-img-http-src, если вы используете Bower).

Если посмотреть на the code, он использует URL.createObjectURL и URL.revokeObjectURL которые still draft 19 апреля 2016 г. Так look if your browser supports it.

Для того, чтобы использовать его, объявить 'angular.img' как зависимость от модуля приложения (angular.module('myapp', [..., 'angular.img'])), а затем в вашем HTML вы можете использовать http-src атрибут для <img> тега.

В вашем примере вы можете написать: <img http-src="https://stackoverflow.com/users/1/images/{{imageId}}">