Question

在我的应用程序中，当我们登录时，我正在传递对图像的Http get请求。图像正在成功加载，但在刷新页面之前不会显示。

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

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

这是HTTP调用：

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

图像从源加载，但登录时不会显示immediatley。

刷新页面后显示。

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

感谢响应人员。通过将图像存储到窗口本地存储，然后使用angular {{ProfileImage}}访问它来解决此问题。

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

3 个答案: