Dynamic image with relative path

Question

I'm trying to add local image icon with relative path. setting dynamic icon with relative path but getting Module not found: Error: Can't resolve '../../content/images/{{imageList[item.type]}}'. Using require variable image path working fine.

Assets/images
imageA
imageB
imageC

import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
export class PhishingDetailsComponent implements OnInit{
  public imageList: any = {'A': 'imageA.png', 'B': 'imageB.png', 'C': 'imageC.png'};
  public itemList: any = [{id: 11, type: 'A'}, {id: 21, type: 'B'}, {id: 101, type: 'B'}, {id: 121, type: 'D'}];
  public images: any = {
   'A': require('../../images/imageA.png'),
   'B': require('../../images/imageB.png'),
   'C': require('../../images/imageC.png')
  };
}

html:

 <div class="well">
  <div *ngFor="let item of itemList">
   <img [src]="images[item.type]" /> // this is working fine.
   <img src="../../images/{{imageList[item.type]}}" /> // this is not working.
  </div>
 </div>

but getting compilation error. plz help me to correct way to use. Thanks.

Possible duplicate of [How to serve up images in Angular2?](https://stackoverflow.com/questions/40230473/how-to-serve-up-images-in-angular2) — Vega, Jan 28 '19 at 12:34
I'm getting Module not found: Error: Can't resolve '../../content/images/{{imageList[item.type]}}'. — Omprakash Sharma, Feb 04 '19 at 09:48
Thanks @Vega, it's my mistake i forget images extension. suppose img ext is there but it's not working. — Omprakash Sharma, Feb 04 '19 at 10:42

score 0 · Answer 1 · answered Jan 28 '19 at 11:48

0

try this :

<div class="well">
  <div *ngFor="let item of itemList">
   <img class="correlation-icon" src="/assets/images/{{imageList[item.type]}}" />
  </div>
 </div>

answered Jan 28 '19 at 11:48

Jaber Alshami

336
3
14

unable to set absolute path, i've relative path. – Omprakash Sharma Feb 04 '19 at 09:46

score 0 · Answer 2 · answered Jan 28 '19 at 12:26

0

Try this

Html File

<div class="well">
  <div *ngFor="let item of itemList">
   <img class="correlation-icon" src="../assets/images/image{{item}}.svg" />
  </div>
</div>

BackEnd

public itemList: any =['A','B','C','D']

answered Jan 28 '19 at 12:26

Saloni shah

59
6

score 0 · Answer 3 · answered Feb 04 '19 at 10:39

0

Your item.type doesn't contain the full image name.

Try this:

 <img src="../../images/{{'image'+imageList[item.type]+'.png'}}" /> // should work :)

answered Feb 04 '19 at 10:39

Vega

27,856
27
95
103

no this will not resolve the correct path. it's produce Error: Can't resolve. – Omprakash Sharma Feb 06 '19 at 08:32
Then, keeping the above, adjust the relative path. remove ../ or just ... Also put images in assets/images next to /app, inside /src et change to "/assets/images/..." and test. if the later works, then it's just inaccessible and you have to change the directory. hope it's clear – Vega Feb 06 '19 at 09:19

Dynamic image with relative path

3 Answers3