Call a function in to define the path of the src

Question

I'm trying to to something like that :

<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">

The function is :

getIcon(status){
    switch (status) {
      case 'Ongoing':
        return '../../../../assets/img/icon/PinPlot.png';
      case 'Signaled':
        return '../../../../assets/img/icon/PinWarning.png';
      case 'Finished':

      default:
        return '../../../../assets/img/icon/Pin red.png';
    }
  }

But all I get is no image like if it's not found. But no error nor warning.

Any idea ?

So and what do you use? Your Tag is Angular... do you use it? Or only Typescript? — René Höhle, Jul 19 '17 at 10:02
https://stackoverflow.com/questions/37965667/whats-equivalent-to-ngsrc-in-angular2 — René Höhle, Jul 19 '17 at 10:04
I get src="accidentIcon(Signaled)" from the browser devTool. Seems like the function is not interpreted ? I'm new to web dev — An-droid, Jul 19 '17 at 10:05

score 14 · Accepted Answer · answered Jul 19 '17 at 10:03

14

Use [src]:

<img id="icon" class="cercle icon" [src]="getIcon(item.status)" alt="">

And also you dont need to getIcon({{item.status}}) but without {{}}.

answered Jul 19 '17 at 10:03

SrAxi

19,787
11
46
65

@An-droid I'm glad I was of help. Cheers! ;) – SrAxi Jul 19 '17 at 10:09

score 2 · Answer 2 · answered Jul 19 '17 at 10:19

Although the previous answer of using [src] is the way I would recommend, the reason why your existing technique doesn't work is because you're not using interpolation (i.e. {{....}} ) correctly.

You have:

<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">

when you probably meant:

<img id="icon" class="cercle icon" src="{{ getIcon(item.status) }}" alt="">

Explanation:

You can think of it this way. Within your template, everything outside {{ }} is treated as literal strings. It's only things within the double braces that are treated as code to execute. So, with your example, because of where you put your braces, you'd end up with the string:

src="getIcon(Ongoing)"

after the interpolation, cuz you're only including the item.status within your braces, instead of the entire expression.

Call a function in to define the path of the src

2 Answers2