Reload image in Angular

Question

I'm trying to reload an image from my webserver every n seconds. The code below drags the new picture, but it doesn't replace the old one in the client. Where is my mistake?

<div ng-app="refresh-div" ng-controller="refresh_control">
    <img ng-src="{{imageUrl}}" />
</div>

<script>
    var app = angular.module('refresh-div', [])
        .controller('refresh_control', function ($scope, $http, $timeout) {
            $scope.imageURL = 'assets/now.png?_ts=' + new Date().getTime();

            $scope.getData = function () {
                $http.get($scope.imageURL, {
                    cache: false
                }).success(function (data, status, headers, config) {
                    $scope.image = data;
                    $scope.imageUrl = "http://mywebsite/assets/now.png";
                });
            };

            $scope.intervalFunction = function () {
                $timeout(function () {
                    $scope.getData();
                    $scope.intervalFunction();
                }, 1500)
            };

            $scope.intervalFunction();
        });
</script>

I have found that making async calls inside timeouts sometimes requires a) writing the http call to return a promise, and later call the promises' then function to update data, or b) wrap either your timeout or success data switch inside $scope.$apply(function() { $scope.imageUrl = '..'; }) . Usually this is reserved for when something leaves the angular scope, and maybe that's what happens when timeouts are used for async methods. — azium
– azium, Commented Jan 18, 2015 at 18:48
Also, I just noticed in your code that for every http call you're assigning $scope.imageUrl to be the same hardcoded string and you aren't using the data returned from your server anywhere. What is $scope.image used for, if anything? — azium
– azium, Commented Jan 18, 2015 at 18:53
I thought that $scope.image will return a searialized byte array that I can use to construct the image in the fron end. Does: $scope.image = data; $scope.imageUrl = "mywebsite/assets/now.png"; means that I make two requests for the same resource? — Andrei
– Andrei, Commented Jan 19, 2015 at 12:25

kostik · Accepted Answer · 2015-01-18 18:51:50Z

a) <img ng-src="{{imageUrl}}" /> - it force Angular.js watch the changes of the value of $scope.imageUrl. When this value changed Angular update image.

b)

$scope.getData = function () {
  $http.get($scope.imageURL, {
    cache: false
})
.success(function (data, status, headers, config) {
  $scope.image = data;
  $scope.imageUrl = "http://mywebsite/assets/now.png"; // <== this line
});

This line $scope.imageUrl = "http://mywebsite/assets/now.png"; always set the same value for $scope.imageUrl. In result there is no updates.

Maybe this code

$scope.intervalFunction = function () {
  $timeout(function () {
    $scope.imageURL = 'assets/now.png?_ts=' + new Date().getTime();
  }, 1500);
};

makes more sense?

Andrei · Accepted Answer · 2015-01-19 12:34:39Z

Fixed the problem, the issue was that $scope.imageURL = 'http://mywebsite/assets/now.png?_ts=' + new Date().getTime(); was missing from the success function. Basically, I needed to updated the url of the image. I'm not sure if it is the best solution, but it is working for my requirements.

<div ng-app="refresh-div" ng-controller="refresh_control">
    <img ng-src="{{imageURL}}" />
</div>

<script>
    var app = angular.module('refresh-div', [])
        .controller('refresh_control', function ($scope, $http, $timeout) {
            $scope.imageURL = 'http://mywebsite/assets/now.png?_ts=' + new Date().getTime(); 

            $scope.getImage = function () {
                $http.get($scope.imageURL, {
                    cache: false
                }).success(function (data, status, headers, config) {
                    $scope.imageURL = 'http://mywebsite/assets/now.png?_ts=' + new Date().getTime();
                });
            };

            $scope.intervalFunction = function () {
                $timeout(function () {
                    $scope.getImage();
                    $scope.intervalFunction();
                }, 1500)
            };

            $scope.intervalFunction();
        });
</script>

so many other attempts failed where this worked perfectly. Thank you

Collectives™ on Stack Overflow

Reload image in Angular

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related