Angularjs 通过http拦截器拦截img src，并且不丢失不断更改它的能力

我有以下需要：

1） 我希望能够通过我的http拦截器拦截对

img ng src

的调用。假设ng src没有被路由到http拦截器，我将使用这个http src指令

2） 然而，问题是该指令只工作一次-它用图像替换“src”属性，因此图像只加载一次，并且不会更改

我的意思是，我的模板具有以下代码：

<span ng-repeat="monitor in MontageMonitors>
<img id="img-$index" http-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" />

</span>

---

在自定义的
httpsrc
指令的link函数中，您需要$observe属性，并在每次更改时调用$http

类似这样的内容（基于您链接到的SO答案中的代码）：

angular.module（'myApp'，[]）
.指令（“httpSrc”，httpSrc指令）；
httpSrcDirective.$inject=['$http']；
函数httpSrcDirective（$http）{
返回{
链接：postLink，
限制：“A”
};
函数后链接（范围、元素、属性）{
var requestConfig={
方法：“GET”，
响应类型：'arraybuffer'，
缓存：“true”
};
函数base64Img（数据）{
var arr=新的UINT8阵列（数据）；
var原始值=“”；
变量i，j，子数组，区块=5000；
对于（i=0，j=arr.length；i
在自定义的
httpsrc
指令的link函数中，您需要$observe属性，并在每次更改时调用$http

类似这样的内容（基于您链接到的SO答案中的代码）：

angular.module（'myApp'，[]）
.指令（“httpSrc”，httpSrc指令）；
httpSrcDirective.$inject=['$http']；
函数httpSrcDirective（$http）{
返回{
链接：postLink，
限制：“A”
};
函数后链接（范围、元素、属性）{
var requestConfig={
方法：“GET”，
响应类型：'arraybuffer'，
缓存：“true”
};
函数base64Img（数据）{
var arr=新的UINT8阵列（数据）；
var原始值=“”；
变量i，j，子数组，区块=5000；
对于（i=0，j=arr.length；i
您能看一下这个要点吗？如果您发现有任何问题，请告诉我？httpSrc是您发布的指令，httpSrcOld是旧指令。当我切换到新指令时，图像不会加载。当我切换到旧指令时，图像会加载（尽管只加载一次）。非常感谢。您可能需要更改requestConfig.url=newValue；到requestConfig.url=scope.$eval（newValue）；所以问题是$http。然后-我不得不将其更改为$http。successYou必须使用Angular的旧版本$http（）。success已被弃用。谢谢，我确实遇到了一个相关的问题——在一些http查询中，服务器一直通过url发送数据——有点像mjpeg流式传输情况。在这段新代码中，它只加载一次-如果服务器继续流式传输数据，我如何在指令中添加功能以保持显示新数据？请看一下这段要点，如果您看到任何不正常的情况，请告诉我？httpSrc是您发布的指令，httpSrcOld是旧指令。当我切换到新指令时，图像不会加载。当我切换到旧指令时，图像会加载（尽管只加载一次）。非常感谢。您可能需要更改requestConfig.url=newValue；到requestConfig.url=scope.$eval（newValue）；所以问题是$http。然后-我不得不将其更改为$http。successYou必须使用Angular的旧版本$http（）。success已被弃用。谢谢，我确实遇到了一个相关的问题——在一些http查询中，服务器一直通过url发送数据——有点像mjpeg流式传输情况。在这段新代码中，它只加载一次-如果服务器继续流式传输新数据，如何向指令添加功能以保持显示新数据？
angular.module('myApp', [])
  .directive('httpSrc', httpSrcDirective);

httpSrcDirective.$inject = ['$http'];

function httpSrcDirective($http) {
  return {
    link: postLink,
    restrict: 'A'
  };

  function postLink(scope, element, attrs) {
    var requestConfig = {
      method: 'GET',
      responseType: 'arraybuffer',
      cache: 'true'
    };

    function base64Img(data) {
      var arr = new Uint8Array(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);
      }
      return btoa(raw);
    };

    attrs.$observe('httpSrc', function(newValue) {
      requestConfig.url = newValue;
      $http(requestConfig)
        .then(function(data) {
          attrs.$set('src', "data:image/jpeg;base64," + base64Img(data));
        });
    });
  }
}