刷新后，頁面圖像未顯示在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屬性，因為如果bacground 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);
  })
 }