Dynamic image

Ionic Framework ionic-v3
1 
   <ion-list>
      <ion-item *ngFor="#item in items">
        <ion-thumbnail item-left>
          <img src="img/{{item.title}}.png">
        </ion-thumbnail>
        <h2>My Neighbor Totoro</h2>
        <p>Hayao Miyazaki • 1988</p>
        <button clear item-right>View</button>
      </ion-item>
    </ion-list>

Hello, I have above command. in item array there are 5. I want that dynamically add “img/” before the title and “.png” after the title. How can I do that ?

Plz help

2

an expression is something like a javascript-statement so you can simple make string concatenation between {{ and }}

{{'img/' + item.title + '.png'}}

4 Likes
3

I believe you might need to use [src] instead of just src.

4

for 100% correctness yes.

But in some cases it is working without the Input-Brackets.
It is like angular is checking --> is this an expression or does this exists on the current context even if you are not using the [].

I tested this lately with an own input-value for a component to set an initial value. And both variants are resulting in the same result. But i do not know what happens exactly with the data-binding afterwards. Maybe the expression is only executed once, if you not wrapping it in the square-brackets.

But all in all, you should use the [] if you set an input-value.

1 Like
5

[src] is not working

6

@arctushar Both ways should be working fine however there’s a difference between them.

Here’s an example how to use either of them in your case:

<img src="{{'img/' + item.title + '.png'}}">

<img [src]="'img/' + item.title + '.png'">

I would recommend you to check out the Angular 2 Cheatsheet for JavaScript or TypeScript.

8 Likes