0

Can I reference an ID from local storage so that I can assign what image should appear? I have the list of images in the AngularJS app under assets/ folder. How can I get the ID of the current user and reference it so I have a dynamic image? If user changes, then also image changes?

TS

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

HTML

<img [src]="image1">

2 Answers2

1

You can do something like:

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

Where 'id' is a variable with the value you will read from the storage (or any other source).

UPDATE:

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'
  }
}
Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
  • These are 'template literals' a feature from ES6 which TypeScript supports too: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals – Christian Benseler Oct 24 '17 at 12:42
  • I not meant that I meant in stackoverflow xD – Swoox Oct 24 '17 at 12:42
  • this is already in my assets folder "../../assets/images/image1.png'". The file name of the image is image1.png? I think this should be dynamic "this.image1" –  Oct 24 '17 at 12:43
  • Don't know, they are available in my keyboard :P (````) – Christian Benseler Oct 24 '17 at 12:43
  • Ahh I see it's only possible in an answer not in comments troll. – Swoox Oct 24 '17 at 12:43
  • 1
    If this.image1 is dynamic, your template will have to be dynamic. Don't need this, keep the variable with a fixed name and only change its value. That's the purpose of using variables... – Christian Benseler Oct 24 '17 at 12:44
  • How can i change the image since i have four images in the assets folder? –  Oct 24 '17 at 12:47
  • You can wrap this code in a function/method. Pass the 'id' as parameter to the function. Call this function/method passing different ids. How you will get this ids is another issue. You will have to put some logic to do this, and this is impossible for me to answer (this is somrthing about the rules from you application). – Christian Benseler Oct 24 '17 at 12:49
  • Id is only localStorage.getItem(‘user_id’) –  Oct 24 '17 at 12:52
  • I have updated the code from my answer with some 'sample code'. – Christian Benseler Oct 24 '17 at 12:53
  • How can you set the localstorage user id and assigned to the variable this.image1? –  Oct 24 '17 at 12:54
  • 1
    Use his code and do: `this.newImage(localStorage.getItem(‘user_id’));` – Swoox Oct 24 '17 at 12:57
  • You want to set the localStorage with a value or read its value? These are different things. – Christian Benseler Oct 24 '17 at 12:57
0

template.html 

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

component.ts

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

updated Answer :

template

<img [src]="image1">

component.ts

export class Component {
    private image1 = `assets/images/image${localStorage.getItem('user_id')}.png`;
}
Chandru
  • 10,864
  • 6
  • 38
  • 53
  • How will able to reference two image since image1 filename is image1.png and image2 is image2.png –  Oct 24 '17 at 13:07
  • If user_id is 1 then output '../../assets/images/image1.png'. If user_id is 2, then output '../../assets/images/image2.png' –  Oct 24 '17 at 13:10
  • use `'assets/images/image1.png'.` instead of `'../../assets/images/image1.png'.` – Chandru Oct 24 '17 at 13:16
  • How can i change the image without reloading the page? –  Oct 24 '17 at 14:52
  • use timestamp or date time in the imageurl like ``assets/images/image${localStorage.getItem('user_id')}.png?` + new Date().getTime();` – Chandru Oct 24 '17 at 16:46