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

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>
		<ion-card *ngFor='let vegetable of vegetables' (click)="diagnoseThis(vegetable)">
	      <img src="./assets/imgs/{{vegetable}}.jpg" >
	      <div class="card-title">{{vegetable}}</div>

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

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(">
	      <img [src]="v.image" >
	      <div class="card-title">{{}}</div>

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?