image not updating using ng-src in Angular

Question

In my controller, I call a service. This service makes a request to a PHP file that gives me a URL to an image.

The reason for this is the image resides inside a "Media Vault" meaning I need to generate a hashed URL like so in order to view it:

http://xxxx.vo.llnwd.net/o35/s/xxx/test/thumbs/slide1.jpg?e=1365006137&h=5852aeaf5beeeebff05a601801b61568

The URL above has already expired so you won't see anything from that specific link.

My image tag is like so:

<img id="thumbnail" class="glow" ng-src="{{currentThumb}}" width="200" height="150"/>

currentThumb in my controller is:

$scope.currentThumb = ImageService.getImage({
    'type' : 'thumb',
    'index' : $scope.currentIndex + 1,
    'location' : $scope.location
});

and my service looks like this:

app.factory('ImageService', function($http)
{
    var image = null;
    return {
        promise:null,
        getImage: function($data)
        {
            this.promise = $http.post('resources/auth.php',$data, {timeout:20000}).success(function(response)
            {
                image = response;
                log(response);
            })
        }
    }
});

The current ImageService successfully returns a URL (at least it shows the url in the console) and when clicking the log result in the console, the image loads fine. Any reason why the image isn't updating?

I've tried thumbnail.src = ImageService.getImage({...}); also with no luck. I get http://localhost/vjs/undefined 404 not found — Ronnie
– Ronnie, Commented Apr 3, 2013 at 17:49
How about putting a return statement in getImage() after you get your response. Or are you resolving your promise? — Justen
– Justen, Commented Apr 3, 2013 at 19:41
I've tried return image; after I set image = response and still nothing. It's like $scope.currentThumb = ImageService.getImage({...}); isn't actually setting anything. Must be a problem with my service? — Ronnie
– Ronnie, Commented Apr 3, 2013 at 19:43
What about the this.promise part, are you calling the method to resolve that promise? Try just calling the $http.post on its own without setting it equal to this.promise. Also include the return image; part. — Justen
– Justen, Commented Apr 3, 2013 at 19:47

Justen · Accepted Answer · 2013-04-03 20:26:45Z

2

I'm not sure how you need to call this, but another way that might be better is to call that ImageService.getImage() in a resolve block of the controller. That way its all loaded before the controller and view taken care of.

jsfiddle

http://jsfiddle.net/HYDmj/1/

view

<div ng-app="main">
  <div ng-controller="ExampleController">
    <h1>currentThumb</h1>
      <img ng-src="{{currentThumb.data}}">
  </div>
</div>

code

var app = angular.module('main',[]);

app.factory('ImageService', function($http)
{
    image = null;
    return {
        getImage: function($data)
        {
            image = $http.post('http://dopserv1.dop.com/test/auth.php', $data, {timeout:20000})
            return image
        }
    }
});

function ExampleController($scope, ImageService)
{
    $scope.currentThumb = ImageService.getImage({
        'type' : 'thumb',
        'index' : 1,
        'location' : 'http://digitalout.vo.llnwd.net/o35/s/mobilevforum/test/'
    });
}

answered Apr 3, 2013 at 20:26

Justen

4,8799 gold badges48 silver badges71 bronze badges

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

4 Comments

Ronnie Over a year ago

What is a resolve block? These images are loaded on demand. Basically if they mouse over an object, depending on which one it is, loads a different thumbnail

Justen Over a year ago

Oh alright then, it's not a use case for it. Here's a couple answers of mine about the resolve block though: stackoverflow.com/questions/11972026/… stackoverflow.com/questions/12307501/…

Ronnie Over a year ago

Ah ok gotcha. I understand what you mean. Basically load/render everything prior to displaying the view. Yeah in this case, I am not able to do so. Thanks again for answer at hand. Helped me out tremendously

Justen Over a year ago

Yeah exactly, glad to help.

Collectives™ on Stack Overflow

image not updating using ng-src in Angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related