CODEWITHSUNDEEP
angularjsimage
Chris at Zwolle
Chris at Zwolle

Reputation: 11

angular 1: image won't reload after a while

In my HTML I have this img link:

imgURL is set in the controller:

$scope.imgURL = 'img/img_'+$scope.img.id+'.jpg;

With the first changes it works perfectly, but after a while the image doesn't show anymore..??

I read an tried several "solutions" like adding a parameter with random value so it forces to reload, but it didn't work. I log the url in the console and see it changing, so that's not the point.

What can cause the not appearing of the image after a while, it looks so random..? Your answer is highly appreciated, I'm rather desperate :-/

Upvotes: 1

Views: 42

Answers (1)

thepio
thepio

Reputation: 6263

I don't know about your HTML structure or code but with AngularJS I would do such a image source rotation with something like this. It's simple and works:

angular.module('myApp', [])

.controller('mainController', function($scope, $interval) {

  var images = [
    'https://placehold.it/350x150',
    'https://placehold.it/450x250',
    'https://placehold.it/250x250'
  ];

  var i = 0;
  $scope.image = images[i];
  $interval(function() {
    i++;
    if (i < images.length) {
      $scope.image = images[i];
    } else {
      $scope.image = images[0];
      i = 0;
    }
  }, 3000, 0);

});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="mainController">
  <img ng-src="{{image}}">
</body>

</html>

You can apply your image variable manipulation to this easily. The main part in the example above is to use ng-src.

Upvotes: 1

Related Questions