Images not loading

Ionic Framework ionic-v3
1

Hello everyone,
I’m trying to display a static image inside a page of my app.
As you can see, I put the images inside a folder inside assets.

Capture
Capture.PNG261×529 11 KB

And then I referenced them in my code like this:

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let prodotto of prodotti" (click)="openDescr(prodotto)">
      <img [src]="'../assets/custom_icons/' + prodotto.merceologia + '.png'" item-start>
      <h2 text-wrap>{{prodotto.nome}}</h2>
      <h3>{{prodotto.merceologia}}</h3>
      <h3>{{prodotto.tipologia}}</h3>
    </ion-item>
  </ion-list>
</ion-content>

Everything works just fine when I run the app with the command

ionic cordova run android -l

but as soon as I disable the autorefresh, the images aren’t loaded properly.
Any idea what could cause this issue?
I’m running ionic 3.6.0 CLI and ionic-angular 3.5.3

2

@lpeppe just use assets/custom_icons/

3

I tried this as well but unfortunately I had the same result

4

print the image source in console.log
you will understand what you are doing wrong…

5

the source is the exact same but the image doesn’t load when I start the app without the -l flag.

6

Check if the Folder and Images exist in

Folder WWW/assets

If not copy it manually in WWW/assets

7

Yes, all the files are also in the www folder

Capture
Capture.PNG257×511 9.78 KB

8

I use

<img src="assets/...">

remove the [] from your img tag.

9

Does it work if you hardcode the paht to one file?

10

it works with property binding if I hardcode the name of the image (it also works without) both with and without livereload:

<img [src]="'assets/custom_icons/dolci.png'" item-start>

I really can’t figure out what could cause this behaviour :frowning:

EDIT:
I found out that the data I was receiving had the first letter capital, so I fixed by using toLowerCase

<img [src]="'assets/custom_icons/' + prodotto.merceologia.toLowerCase() + '.png'" item-start>

It works fine now, thanks a lot for the help guys!

1 Like
11

I normally build the path string in the typescript and in the html file i do

<img src="{{clothingDetail.image_url}}">

Perhaps you must Change

prodotto.merceologia

to

{{prodotto.merceologia}}

Or build the path in your typescript.

1 Like