[SOLVED] Images only load on web, not on mobile

Ionic Framework
1

Help a newbie? This is driving me batty. My images load happily using ionic serve but are broken in Android. I tried an empty build and that works. (ionic start deleteme super --capacitor --type=ionic-angular) So it’s probably something wrong with my starter app, but I’m not sure what.

I reviewed this thread:

And I tried this:

this.position_pic = './assets/images/coop_door_open.jpg';

<ion-img [src]="position_pic"></ion-img>

And this:

this.position_pic = 'coop_door_open.jpg';

<ion-img src="./assets/images/{{ position_pic }}"></ion-img>

And this:

<ion-img src="../assets/images/{{ position_pic }}"></ion-img>

And this:

<ion-img src="../../assets/images/{{ position_pic }}"></ion-img>

And this:

<ion-img src="/assets/images/{{ position_pic }}"></ion-img>

And this:

<ion-img src="assets/images/{{ position_pic }}"></ion-img>

I also by the way tried it without the variable:

<ion-img src="./assets/images/coop_door_open.jpg"></ion-img>

In all cases, the image loads in the browser but not on mobile. I checked the case of the path and file names. Confirmed the files make it into the www/assets/images/ directory. Confirmed they’re copied into android/app/src/main/assets/public/assets/images. Invalidated the Android caches/restarted. Uninstalled the app on my phone/reinstalled.

Help? Do I need to clear some build caches I’m not aware of or something?

2

That was the trick. I renamed the android folder and ran “ionic capacitor add android” to rebuild all the Android resources.

Whew! I don’t have many hairs left :smile:

1 Like