Bilder werden geladen angular JS

Question

Ich versuche gerade, ein Bild in ein img-Tag zu laden. Mein Problem ist, dass das Laden des Images nicht über eine bestimmte src-URL erfolgen kann. Also habe ich eine Funktion erstellt, die das Bild zurückgibt. Ich rufe die Funktion gerade im folgenden Format auf, ohne dass ein Bild geladen wurde. Bitte beachten Sie, dass ich überprüft habe, dass die Funktion tatsächlich einen Wert als Array-Puffer zurückgibt. Danke für Ihre Hilfe!

Code:

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

Die Funktion Img.getImage(par).$promise asynchron ist. Sie können keinen Wert im Inneren zurückgeben.

Es ist nicht die beste Lösung, aber man kann so Somthing tun:

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

Ihre getImage Funktion gibt nicht den Array-Puffer aus dem Dienst, weil du es von einem Versprechen erhältst. Wenn Sie einen Wert von einem asynchronen Betrieb erhalten möchten und binden Sie es zu der Ansicht, müssen Sie es als $scope Parameter einzustellen:

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

Und dann:

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