Question

所以我有以下代码：

<body lang="en-US" ng-app="socket-server" ng-controller="imageValidationController">
    <div class="image-panel">
        <h1>Images Found:</h1>
        <div class="image-list" ng-repeat="image in images">
            <p>Image size: {{image.size}}</p>
            <p>Width: {{image.width}}</p>
            <p>Height: {{image.height}}</p>
            <img class="image" ng-src="{{image.image}}">
        </div>
        <p>Total images found: {{num_images}}</p>
    </div>

我有以下javascript：

    var app = angular.module('socket-server', []);


    app.controller('imageValidationController', function($scope, $http) {
        $http({
            method: 'POST',
            data: 'html=<html><body><img src="https://media.giphy.com/media/lhvyCCcFuQFKo/200.gif"></body>',
            url: '/app/image-validation',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        .then(function(response) {
            $scope.images = response.data.images;
            $scope.num_images = response.data.num_images;
        })

    })

/ app / image-validation返回格式为的对象：

{
    images: [ 
        {
            image: 'http://someurl.com/image.jpg',
            size: 471812
            width: 640
            height: 480
        }
    ]
}

我已经确认它有效。

一切正常，图像大小，宽度，高度都得到更新，但图像却没有。它确实创建了具有正确源的图像标记，但图像根本不加载。我不确定我在这里做错了什么。

Answer 1

唯一的问题是响应数据。它应该像

<强>之前：

{
    images: [ 
        {
            image: 'http://someurl.com/image.jpg',
            size: 471812
            width: 640
            height: 480
        }
    ]
}

<强>后：

{
    images: [ 
        {
            image: 'http://someurl.com/image.jpg',
            size: 471812,
            width: 640,
            height: 480
        }
    ]
}

这是一个提供正确响应数据的小提琴，效果很好！

JSFiddle Demo

Answer 2

也许它可以像在图像URL中添加decache查询字符串一样简单？即

.then(function(response) {
        $scope.images = response.data.images;
        $scope.num_images = response.data.num_images;

      angular.forEach( $scope.images.image ,  function(url, key) {         
       $scope.images[key].image= url+ '?decache=' + Math.random();
    })

Answer 3

基本上，帖子数据中的网址https://media.giphy.com/media/lhvyCCcFuQFKo/200.gif并不是真正的gif。它是一个有问题的gif的html页面，所以它没有加载它。

如果我使用另一个图片网址来发布数据，那就可以了：

app.controller('imageValidationController', function($scope, $http) {
    $http({
        method: 'POST',
        //should work fine now
        data: 'html=<html><body><img src="https://media3.giphy.com/avatars/nikdudukovic/ylDRTR05sy6M.gif"> </body>', 
        url: '/app/image-validation',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .then(function(response) {
        $scope.images = response.data.images;
        $scope.num_images = response.data.num_images;
    })

})

以数据形式返回：

{
    "images":[
        {
             "image": "https://media3.giphy.com/avatars/nikdudukovic/ylDRTR05sy6M.gif",
             "size": 337783,
             "width": 250,
             "height": 250,

        }
    ],
    "num_images": 1
}

角度ajax图像不更新

3 个答案: