在Angular中重新加载图像 [英] Reload image in Angular
本文介绍了在Angular中重新加载图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试每隔n秒从我的网络服务器重新加载一张图片。下面的代码拖拽新图片,但它不会取代客户端中的旧图片。我的错误在哪里?
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>
推荐答案
修复了问题,问题是$ scope。 imageURL =' http://mywebsite/assets/now.png?_ts = '+ new 。日期()的getTime();成功函数中缺少。基本上,我需要更新图像的URL。我不确定它是否是最好的解决方案,但它符合我的要求。
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>
这篇关于在Angular中重新加载图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文