Some Images don't load in Ionic build or in deployed apk

[Cabz]

Hey guys, i need help…
I have an app that uses images but when i deployed it, some images don’t load… though all is well when i use ionic serve. I have no clue what’s happening.

This is the screenshot from the deplyoed app:

This is the screenshot from ionic serve:

And this is the code:

    <div text-center *ngIf='diseases=="" && diagnostics.affected_part==""'>
		<h2 *ngIf="eng=='true'">Please choose a vegetable:</h2>
		<h2 *ngIf="bis=='true'">Palihog pili ug tanom:</h2>
		<br>
		<ion-card *ngFor='let vegetable of vegetables' (click)="diagnoseThis(vegetable)">
	      <img src="./assets/imgs/{{vegetable}}.jpg" >
	      <div class="card-title">{{vegetable}}</div>
	    </ion-card>
	</div>

If you have any idea how to solve this, please do tell me.

[8tomo8]

@Cabz

<img src=“./assets/imgs/{{vegetable}}.jpg” >

Should be

<img src="assets/imgs/{{vegetable}}.jpg"  >

Or even better in ts file declare a new array call it vegImageArray = []

for (let v of this.vegetables) {
this.vegImageArray.push({image: `assets/imgs/${v}.jpg`, name: v})
}

Then your html will just look like

<ion-card *ngFor='let v of vegImageArray ' (click)="diagnoseThis(v.name)">
	      <img [src]="v.image" >
	      <div class="card-title">{{v.name}}</div>
</ion-card>

[Cabz]

Thanks @8tomo8. I tried it but its no good. Images is still not loaded.

Btw, i checked the images in the android platform in here: C:[PC_user][PC_name][Projectname]\platforms\android\app\src\main\assets\www\assets\imgs

and it seems that the names of the images are messed-up(names start in small letters after build), only the Cabbage and Chinese Cabbage remain unchanged.

any idea why is this happening?