javascript - 在没有任何参数的情况下在javascript中重新加载图像

Question

我正在尝试使用 AngularJS 显示图像并每分钟自动刷新一次。

问题是我抓取的图像来自一个 API，该 API 不允许我将任何虚假内容附加到 url 以使 url 每次都不同。所以，没有 ?_ts=12356678 等等......

我目前的代码是这样的:

HTML 模板:

<div data-ng-controller="UpdateController" data-ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
  <img ng-src="{{ image_url }}"></img>
</div>

AngularJS Javascript:

var app = angular.module('app', []);
app.controller('UpdateController', function($scope, $timeout) {
  $scope.image_reloader = function(timer, url) {
    $scope.timer = timer || 10000;
    $scope.updater = function() {
      $scope.image_url = url + '?_ts=' + new Date().getTime();
      $timeout($scope.updater, $scope.timer);
    };
    $scope.updater();
  };
});

除了我不能使用的 ?_ts 部分之外，这种方法可以解决问题...将 scope.image_url 部分更改为 $ scope.image_url = url; 不执行任何操作，它也不会尝试刷新图像。

我如何强制 AngularJS 尝试刷新它？在将其更改为 url 之前，我还尝试将 $scope.image_url 设置为 ''。

AngularJS 只是框架，任何 Javascript/jQuery 解决方案都可以，但我更喜欢与 AngularJS 相关的解决方案。

Answer 1

我向该 API 的 vendor 发送了一个添加虚拟参数的请求，以便这成为可能，但现在已经一个月了，没有回复。

我也一直在思考这个问题，终于找到了解决办法。它就像使用 # 符号而不是 ? 一样简单。哈希永远不会发送到服务器，但仍然足以让 JavaScript 将其视为不同的请求并因此重新获取图像。有点尴尬之前没有想到这一点 :)

示例(使用我为这个项目所做的工作流，而不是 AngularJS 最佳

Angular 代码:

$scope.image_reloader = function(timer, url) {
  $scope.timer = timer || 10000;
  $scope.updater = function() {
    $scope.image_url = url + '#' + new Date().getTime();
    $timeout($scope.updater, $scope.timer);
  };
  $scope.updater();
};

HTML代码:

<div ng-controller="UpdateController" ng-init="image_reloader(timer=2000, url='http://lorempixel.com/400/200/sports/')">
  <img ng-src="[[ image_url ]]"></img>
</div>