刷新后页面图像不显示在 AngularJS 的视图中？

Question

我必须使用 Firebase 在 AnguarJS 中上传图像，但问题是图像已正确上传，并且我必须将 imageURL 存储到 localStorage 但刷新页面图像后我不明白什么问题

$scope.backgroundImageURL  = [];
$scope.currentUserObject   = {};
$scope.uploadBackgroundImage = function(event) {
//Get the userDetail of the current logged in user
$scope.currentUserObject =  localStorage.getItem('userName');

   //Get the value from the input field and assign into the fireabse node
   var userProductImg       = $("#getImageAttribute")[0].files[0];
   var PRODUCT_STORAGE_REF  = firebase.storage().ref('user/image');

   //get the date as well as put the imageURL from node
  var rn = new Date().getTime().toString();
  var task =              PRODUCT_STORAGE_REF.child("loggedInUserObject").child($scope.currentUserObject).child(rn).put(userProductImg).then(function(snapshot) {
      
      $timeout(function(){
           $scope.backgroundImageURL.push(snapshot.downloadURL);
          localStorage.setItem('userImageURL', $scope.backgroundImageURL);
       }, 50);
  })
 }

<input type="file" id="getImageAttribute" ng-click="$event = $event" ng-      model="display" multiple                  onchange="angular.element(this).scope().uploadBackgroundImage(event)"
/>
<span ng-repeat="imgURL in backgroundImageURL"> 
<img src="{{imgURL}}">
</span>

?

Answer 1

尝试使用ng-src 而不是src 属性，因为如果免费的img url 发生动态变化，它将刷新图像。

您可以从这里获得更多信息：https://www.w3schools.com/angular/ng_ng-src.asp 或者 你也可以试试这个：https://docs.angularjs.org/api/ng/directive/ngSrc

Answer 2

刷新页面后，你的图片数组为空：

$scope.backgroundImageURL = [];

您需要一种方法从存储中获取图像并将它们分配给您的 backgroundImageURL 数组，并且必须在加载页面后立即调用此方法。

您的代码可能类似于以下内容：

$scope.backgroundImageURL  = [];
$scope.currentUserObject   = {};

$scope.loadResources();

$scope.loadResources = function() {
  $scope.backgroundImageURL = localStorage.getItem('userImageURL');
  $scope.currentUserObject = localStorage.getItem('userName');
}

$scope.uploadBackgroundImage = function(event) {
//Get the userDetail of the current logged in user
$scope.currentUserObject =  localStorage.getItem('userName');

   //Get the value from the input field and assign into the fireabse node
   var userProductImg       = $("#getImageAttribute")[0].files[0];
   var PRODUCT_STORAGE_REF  = firebase.storage().ref('user/image');

   //get the date as well as put the imageURL from node
  var rn = new Date().getTime().toString();
  var task =              PRODUCT_STORAGE_REF.child("loggedInUserObject").child($scope.currentUserObject).child(rn).put(userProductImg).then(function(snapshot) {

      $timeout(function(){
           $scope.backgroundImageURL.push(snapshot.downloadURL);
          localStorage.setItem('userImageURL', $scope.backgroundImageURL);
       }, 50);
  })
 }