首页 > 解决方案 > 显示来自本地存储的图像时出现问题

问题描述

我是角度框架的新手,不习惯 Web 开发。我无法显示存储在本地存储中的图像。

<tr *ngFor = "let item of unused; let i = index ; ">
     <div   style="padding-left:25%;padding-top:0%;"  class="row">
          <img  src="" id="imageID{{i}}" style ="width: 100%;height: 100%;padding-right: 50px;padding-bottom: 15px;" >
     </div>
</tr>

我全局声明了数组变量,也像这样在 ngOnit 中使用

unused=[1,2,3,4,5]

for (let i=0; i<5;i++)
    { 
      var n = i.toString();

      var dataImage = localStorage.getItem(("image"+ n));
      var bannerImg = document.getElementById(("imageID"+n)) as HTMLImageElement;
      bannerImg.src = dataImage;
    }

标签: javascriptangulartypescriptwebangular6

解决方案


dataImages: any[]= [];

ngOnInit(){
for (let i=0; i<5;i++)
    { 
      var dataImage = localStorage.getItem(("image"+ i));
      dataImages.push(dataImage);
    }
}

<tr *ngFor = "let item of dataImages">
     <div   style="padding-left:25%;padding-top:0%;"  class="row">
          <img  [src]="item"  style ="width: 100%;height: 100%;padding-right: 50px;padding-bottom: 15px;" >
     </div>
</tr>

推荐阅读