javascript - 显示来自本地存储的图像时出现问题
问题描述
我是角度框架的新手,不习惯 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;
}
解决方案
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>
推荐阅读
- inheritance - Modelica:如何将 Child 类型的实例分配给 Parent 类型的变量?
- jenkins - 字符串变量赋值不包括 Jenkinsfile 中的字符串引用
- javascript - 是否可以从 react-leaflet 更改默认请求行为?
- javascript - 带有 websocket 的无服务器 lambda 不保存接收到的数据
- shell - 终端创建 Mac 别名给出权限错误
- docker - “在上游找不到主机......”使用“kubectl apply -f”但在“docker-compose up”中有效
- python - 如何将自定义过滤器应用于 django 过滤器 ModelChoicefilter
- python - 生成随机数时额外不需要的结果
- javascript - Antlr4 词法分析器规则仅应在行首匹配
- c++ - 缺少类型说明符和显式类型是缺少错误