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, Apr 03 '13 at 17:49
How about putting a return statement in `getImage()` after you get your response. Or are you resolving your promise? — Justen, Apr 03 '13 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, Apr 03 '13 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, Apr 03 '13 at 19:47
no method to resolve the promise that I am aware of. I am new to angular so I don't know what I'm doing half the time lol. Anyway, I removed the `this.promise =` part and left in `return image;`, tried it, no luck. Removed it, no luck — Ronnie, Apr 03 '13 at 19:54
here we go @Justen http://jsfiddle.net/HYDmj/ had to add some headers to my php file. Just keep an eye on the javascript console — Ronnie, Apr 03 '13 at 20:08
I noticed if I `return $http....` I get an object back with the `data` in it — Ronnie, Apr 03 '13 at 20:16
7 hours later! Geez, awesome man, if you post this as an answer I will accept it. thanks so much! I can move on finally. — Ronnie, Apr 03 '13 at 20:26

score 2 · Accepted Answer · answered Apr 03 '13 at 20:26

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 03 '13 at 20:26

Justen

4,859
9
44
68

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 – Ronnie Apr 03 '13 at 20:29
Oh alright then, it's not a use case for it. Here's a couple answers of mine about the resolve block though: http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker/12312015#12312015 http://stackoverflow.com/questions/12307501/q-defer-and-promises-and-how-to-use-them-to-load-the-data-for-a-controller-befo/13408143#13408143 – Justen Apr 03 '13 at 20:30
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 – Ronnie Apr 03 '13 at 20:37
Yeah exactly, glad to help. – Justen Apr 03 '13 at 20:38

image not updating using ng-src in Angular

1 Answers1