Javascript 刷新页面后，不会加载所有图像

我正在用JavaSpringREST和Angular/JS做fullstack项目，这给了我一些严重的问题。我有主页，我显示9随机产品（游戏）。我通过http调用获取产品信息和图像路径（保存在服务器上）。获取imagepath后，我进行http调用以获取图像。在后端，一切正常-获取游戏信息和图像

然而，刷新页面后，并不是所有的图像都显示出来——有时显示9个图像中的1个，有时显示5个，有时一个也没有。如果我不刷新页面并再次拨打相同的电话（通过按下按钮），所有图像都会正确显示。我很确定我不了解异步调用。我花了几天的时间想弄明白，但没有成功

第页：

服务：

this.getImageForGame = function( imagePath, $http, $location ){ 
    var absUrl = $location.absUrl().replace(/OnlineGameStore.*$/, '');
    var completeUrl = absUrl + "OnlineGameStore/getGamePhoto/" + imagePath;
    return $http( {
        method: 'GET',
        url: completeUrl,
        responseType: "blob"
    });
};

---

编辑：我刚刚注意到-在网站上做了一些事情后（例如从选择列表中选择选项），所有缺失的图像都被正确加载

请求是否返回图像文件或图像文件的url？如果请求给您一个图像文件，您可以直接在

img

标记中使用请求的url。您不需要阅读blob。你能告诉我们该请求的响应吗？有两个请求-一个返回带有图像路径的产品信息（比如它的url）。基于映像路径，我提出了另一个请求—它返回字节映像，我稍后将其转换为“fileReader.readAsDataURL（）；”。我不知道这样做是否正确，但我希望它完全是REST服务。您不需要第二个请求（至少不明确）。您只需将图像路径设置为图像标记的src。浏览器会帮你取图像的。哦，我没想过。。。我会改变它，看看问题是否仍然存在。然而，我认为它只能解决问题，不能解决问题。如果某个REST服务只返回blob，而我必须将其转换，该怎么办？您所做的一切都很好。您必须将blob写入请求回调中作用域中的变量，并在

img

的

data ng src

中使用该变量。注意，这必须在完整的数据URI方案中：“数据：image/png；base64，iVBORw0…”。我想这就是你的代码中缺少的。请求返回的是图像文件还是图像文件的url？如果请求给您一个图像文件，您可以直接在

img

标记中使用请求的url。您不需要阅读blob。你能告诉我们该请求的响应吗？有两个请求-一个返回带有图像路径的产品信息（比如它的url）。基于映像路径，我提出了另一个请求—它返回字节映像，我稍后将其转换为“fileReader.readAsDataURL（）；”。我不知道这样做是否正确，但我希望它完全是REST服务。您不需要第二个请求（至少不明确）。您只需将图像路径设置为图像标记的src。浏览器会帮你取图像的。哦，我没想过。。。我会改变它，看看问题是否仍然存在。然而，我认为它只能解决问题，不能解决问题。如果某个REST服务只返回blob，而我必须将其转换，该怎么办？您所做的一切都很好。您必须将blob写入请求回调中作用域中的变量，并在

img

的

data ng src

中使用该变量。注意，这必须在完整的数据URI方案中：“数据：image/png；base64，iVBORw0…”。我想这就是你的代码中缺少的东西。

GetRandomGames.getRandomGames($http).then( function(randomGames) { 
    angular.forEach( randomGames, function(game) {
        var promise =  GetImageForGame.getImageForGame(game.imagePath, $http, $location );
        promise.then(
            function(image){
                var fileReader  = new FileReader();
                fileReader.addEventListener("load", function () {
                    game.gameImage = fileReader.result;
                }, false);
                fileReader.readAsDataURL(image.data);          
            },
            function(){
                console.log("Error");
            }
        );
    });
    $scope.games = randomGames;
}); 

this.getImageForGame = function( imagePath, $http, $location ){ 
    var absUrl = $location.absUrl().replace(/OnlineGameStore.*$/, '');
    var completeUrl = absUrl + "OnlineGameStore/getGamePhoto/" + imagePath;
    return $http( {
        method: 'GET',
        url: completeUrl,
        responseType: "blob"
    });
};