画像を読み込む角度があります。JS

Question

現在画像を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)}}"> 

Answer 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}}">

Answer 2

あなたgetImage機能は、サービスから配列バッファを返しませんが、あなたが約束からそれを得ているからです。その後、

$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}}">