加载图像角度JS [重复]答案

【问题标题】：Loading images angular JS [duplicate]加载图像角度JS [重复]
【发布时间】：2017-12-13 00:00:43
【问题描述】：

我目前正在尝试将图像加载到 img 标记中。我的问题是无法通过特定的 src url 加载图像。所以我创建了一个返回图像的函数。我目前正在以以下格式调用该函数，但未加载任何图像。请注意，我已经验证该函数确实返回一个值作为数组缓冲区。感谢您的帮助！

代码：

JS-

//use .factory Img object to return arraybuffer value
$scope.getImage = function(productid) {
      console.log(productid);
      par = {id: [productid]};
      Img.getImage(par).$promise.then(
        function(data){
          console.log("success:" + data); //I am able to see this result but not display in img tag
          return data;
        },
        function(data){
          console.log("error" + data);
        }
      );
    }

HTML-

<img ng-src="{{getimage(id)}}">

【问题讨论】：

嗨 paul590，我不确定你在问什么？
getimage 是异步的，它不返回 URL，它是一个承诺。
@Derek 很抱歉造成混淆，我想知道当我没有实际的 url 但有一个返回数组缓冲区的函数时，如何将图像加载到我的 img 标签中。
@JeremyThille 是的，getimage 是一个承诺，因为它返回一个数组缓冲区，有没有办法将此响应添加到 img 标签？
getimage 不返回任何内容。你的承诺的回调确实如此。您不能同步分配异步值。 1) 获取您的数据。 2）将其存储在控制器的变量中。 3) 将此变量用作图像的来源。

标签： javascript html angularjs

【解决方案1】：

函数Img.getImage(par).$promise 是异步的。你不能在里面返回一个值。

这不是最好的解决方案，但你可以这样做：

JS：

$scope.getImage = function(productid) {
  console.log(productid);
  par = {id: [productid]};
  Img.getImage(par).$promise.then(
    function(data){
      console.log("success:" + data); //I am able to see this result but not display in img tag
      scope.productionPicturePath = data;
      return data;
    },
    function(data){
      console.log("error" + data);
    }
  );
}

HTML : <img ng-src="{{productionPicturePath}}">

【讨论】：

我可能犯了一个新手错误，但是当我以这种方式加载图像时，它无法加载它试图使用以下 localhost:8080/我收到的数据结果来查看我的服务器
我发现这是成功的！谢谢！

【解决方案2】：

您的getImage 函数不会从服务返回数组缓冲区，因为您是从承诺中获取的。如果你想从一个异步操作中获取一个值并绑定到视图，你需要将它设置为$scope参数：

$scope.getImage = function(productid) {
      $scope.currentArrayBuffer = null;
      par = {id: [productid]};
      Img.getImage(par).$promise.then(
        function(data){
          console.log("success:" + data); 
          $scope.currentArrayBuffer = data;
        },
        function(data){
          console.log("error" + data);
        }
      );
    }

然后：

<img ng-src="{{currentArrayBuffer}}">

【讨论】：

正如我在上面的回复中所说，我可能犯了一个新手错误，但是当我以这种方式加载图像时，它无法加载它试图使用以下 localhost:8080/result 查看我的服务器我收到的数据