在我们刷新页面之前图像不会显示

Question

在我的应用程序中，当我们登录时，我正在传递一个图像的 Http get 请求。图片正在加载成功，但在我刷新页面后才显示。

我希望在我的应用程序中使用 angular 登录时显示它。

<img ng-src="{{ProfileImage}}" />

这是 HTTP 调用：

  $http.get('URLpath')
    .then(function(response){
$scope.ProfileImage=response.data;
}

图像正在从源加载，但在我登录时并没有立即显示。

刷新页面后显示。

Answer 1

var app = angular.module('myApp', []);
app.controller('DemoCtrl', function($scope, $http) {

    $scope.myObj = { 
        "image":"https://www.w3schools.com/css/trolltunga.jpg", 
    };

});

<!DOCTYPE html>
<html>

<body>

<div ng-app="myApp" ng-controller="DemoCtrl"> 
<img src="{{myObj.image}}"  width="100" height="100">

</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</body>
</html>

Answer 2

您应该将图像包装到 ng-if 以便它应该在加载数据后显示，或者在响应到来之前将一些有效数据分配给 $scope.ProfileImage。否则，你的ng-src就被忽略了。

Answer 3

感谢大家的回复。此问题已通过将图像存储到 window 本地存储然后使用 angular {{ProfileImage}} 访问来解决。

在我们刷新页面之前图像不会显示

Image is not displaying until we refresh the page

javascript

jquery

http-get

angularjs