Loading images angular JS [duplicate]

Question

I am currently trying to load an image into an img tag. My issue is that the loading of the image cannot be done through a specific src url. so I have created a function which returns the image. I am currently calling the function in the following format with no image been loaded. Please note i have verified that the function does indeed return a value as an array buffer. Thank you for your help!

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

getimage is asynchronous, it doesn't return an URL, it's a promise. — Jeremy Thille
– Jeremy Thille, Commented Dec 12, 2017 at 15:50
@Derek I apologize for the confusion, I am wondering how can I load an image to my img tag when I dont have an actual url but a function that returns a arraybuffer. — paul590
– paul590, Commented Dec 12, 2017 at 15:54
@JeremyThille Yes the getimage is a promise, since it returns an arraybuffer is there a way to add this response to the img tag? — paul590
– paul590, Commented Dec 12, 2017 at 15:55
getimage returns nothing. The callback of your promise does. You can't synchronously assign an asynchronous value. 1) Get your data. 2) Store it in a variable in your controller. 3) Use this variable as source for your image. — Jeremy Thille
– Jeremy Thille, Commented Dec 12, 2017 at 15:59

anthony · Accepted Answer · 2017-12-12 15:59:34Z

3

The function Img.getImage(par).$promise is asynchronous. You can't return a value inside.

It's not the best solution but you can do somthing like that :

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

answered Dec 12, 2017 at 15:59

anthony

1261 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

paul590 Over a year ago

I could be making a rookie mistake but when i load the image this way, its unable to load its trying to look at my server with the following localhost:8080/result of data i receive

paul590 Over a year ago

I figured it out this did the trick! thank you!

F.Almeida · Accepted Answer · 2017-12-12 16:00:43Z

2

Your getImage function does not return the array buffer from the service, because you are obtaining it from a promise. If you want to get a value from an asynchronous operation and bind it to the view, you need to set it as a $scope parameter:

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

And then:

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

answered Dec 12, 2017 at 16:00

F.Almeida

4132 silver badges13 bronze badges

1 Comment

paul590 Over a year ago

As I stated on the response above I could be making a rookie mistake but when i load the image this way, its unable to load its trying to look at my server with the following localhost:8080/result of data i receive

Collectives™ on Stack Overflow

Loading images angular JS [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related