Image not showing in device

I’ve a simple grid and it contains a simple image which works perfect on chrome browser, but the image doesn’t show in mobile device (android).
The image in last column doesn’t show in mobile device while other two show perfectly and in browser all show perfectly

<ion-grid>
    <ion-row>
        <ion-col (click)="onClickCategory('Face Care','face-care')">
            <img src="assets/topCat_face.png" alt="">
            <ion-text>{{"home.faceCare"|translate}}</ion-text>
        </ion-col>
        <ion-col (click)="onClickCategory('Lip Care','lip-care')">
            <img src="assets/topCat_lipSticks.png" alt="">
            <ion-text>{{"home.lipCare"|translate}}</ion-text>
        </ion-col>
        <ion-col (click)="onClickCategory('Scalp And Hair Care','scalp-and-hair-care')">
            <img src="assets/topCat_hairs.png" alt="">
            <ion-text>{{"home.hairCare"|translate}}</ion-text>
        </ion-col>
    </ion-row>
</ion-grid>

Have you tried the following:

  1. For the bad image, temporarily reuse one of the ‘good’ images. Change the src to point to either the face or lipsticks. If that replacement renders fine on your mobile device, that points toward something directly with the image or the src path. If did does not, then that points toward something else, like the template.
  2. Revert back to your original code, and replace the ‘bad’ image file itself with a copy of one of the good images. If that image is shown, then we know the template is ok and it is the original file.
  3. If it is template issue, try reordering and rebuilding them.

If you are not aware, it is possible to remote debug your app, so the console log can be made available.

2 Likes

Thank you so much for your response, but issue was something else, which I still don’t understand but still its working :stuck_out_tongue:
and as long as its working, I normally don’t care about :smiley: