根据Angular 4中LocalStorage的ID加载图像

Question

我可以从本地存储中引用一个 ID，以便分配应该显示的图像吗？我在 assets/ 文件夹下的 AngularJS 应用程序中有图像列表。如何获取当前用户的 ID 并引用它，以便获得动态图像？如果用户改变，那么图像也会改变？

TS

constructor() {
    this.image1 = '../../assets/images/image1.png';
}

HTML

<img [src]="image1">

Answer 1

你可以这样做：

this.image1 = `assets/images/image${id}.png`;

其中 'id' 是一个变量，其值是您将从存储（或任何其他来源）中读取的值。

更新：

class YourComponent {

   image1: string = '';

   newImage(id: number) {
      this.image1 = `assets/images/image${id}.png`;
   }

  someMethod() {
    //do some stuff
    this.newImage(2); //will change image1 to 'assets/images/image2.png'
    //do more stuff
    this.newImage(3); //now image1 is 'assets/images/image3.png'
  }
}

Answer 2

template.html

<img src="{{'assets/images/image'+id+'.png'}}">

component.ts

export class Component {
    private id = localStorage.getItem('user_id');
}

更新答案：

模板

<img [src]="image1">

component.ts

export class Component {
    private image1 = `assets/images/image${localStorage.getItem('user_id')}.png`;
}