在Angular中使用ng-src无法更新图像

image not updating using ng-src in Angular

本文关键字：更新 图像 ng-src Angular      更新时间：2023-09-26

在我的控制器中，我调用一个服务。这个服务向一个PHP文件发出请求，该文件给我一个指向图像的URL。

这样做的原因是图像位于"Media Vault"中，这意味着我需要生成一个散列URL，以便查看它:

http://xxxx.vo.llnwd.net/o35/s/xxx/test/thumbs/slide1.jpg?e=1365006137&h=5852aeaf5beeeebff05a601801b61568

上面的URL已经过期，所以你不会看到来自特定链接的任何内容。

我的图像标签是这样的:

<img id="thumbnail" class="glow" ng-src="{{currentThumb}}" width="200" height="150"/>

currentThumb在我的控制器是:

$scope.currentThumb = ImageService.getImage({
    'type' : 'thumb',
    'index' : $scope.currentIndex + 1,
    'location' : $scope.location
});

和我的服务看起来像这样:

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);
            })
        }
    }
});

当前的ImageService成功返回一个URL(至少它在控制台中显示了URL)，当单击控制台中的日志结果时，图像加载正常。为什么图像没有更新?

我不确定你需要如何调用这个，但另一种可能更好的方法是在控制器的解析块中调用ImageService.getImage()。这样，在控制器和视图被处理之前，它就已经加载了。

jsfiddle

http://jsfiddle.net/HYDmj/1/

<

视图/strong> 

<div ng-app="main">
  <div ng-controller="ExampleController">
    <h1>currentThumb</h1>
      <img ng-src="{{currentThumb.data}}">
  </div>
</div>


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/'
    });
}
相关文章：