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

Question

我必须使用firebase在AnguarJS上传图片，但问题是图片已正确上传，我必须将imageURL存储到localStorage中，但刷新页面图片后删除我不要＆＃ 39;了解问题所在

＆＃13;

＆＃13;

$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);
  })
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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);
  })
 }