图像未显示在 IONIC 4 的设备中，来自 android 9 及更高版本的服务器

Question

I want to show list of categories.

Image is not shown on android version 9 and above.
when I try to put static image it shows perfectly but image from server is not shown.

On ionic serve it is showing image as expected.

Response:

[{"categoryId":"1","name":"General Knowledge","image":"http://codehub.biz/knowledgeup/API/images/gk_categaries_icons.png"},{"categoryId":"3","name":"Biology","image":"http://codehub.biz/knowledgeup/API/images/biology_categaries_icons.png"},{"categoryId":"4","name":"Chemistry","image":"http://codehub.biz/knowledgeup/API/images/Chemastry_Categaries_Icons.png"},{"categoryId":"5","name":"Economy","image":"http://codehub.biz/knowledgeup/API/images/Economy.png"},{"categoryId":"6","name":"Sports","image":"http://codehub.biz/knowledgeup/API/images/sports_categaries_icons.png"},{"categoryId":"7","name":"Physics","image":"http://codehub.biz/knowledgeup/API/images/physics.png"},{"categoryId":"8","name":"World Geography","image":"http://codehub.biz/knowledgeup/API/images/geo.png"},{"categoryId":"10","name":"Science & Inventions","image":"http://codehub.biz/knowledgeup/API/images/science.png"}]

tab1.html

<ion-grid>
  <ion-row  class="margin" *ngFor="let row of grid">
    <ion-col size="3" class="ion-text-center" *ngFor="let item of row" (click)="quizInfo(item.categoryId,item.name)">
      <img class="logo" [src]='item.image'> <br>
      <!-- <img src="../../assets/icon/bio.png" class="logo"> <br> -->
      <p class="margin title">{{item.name}}</p>
    </ion-col>
  </ion-row>
</ion-grid>

This is my html for displaying list.

Image is not shown
1st image is of android version 9 and is android version 7

Answer 1

The problem is http request.
Image path start with http.
Android pie don't accept API requests without https requests for security.

Answer 2

the problem is that android 9 above by default only accepts HTTPS calls. But you can bypass add this to your Androidmanifest.xml : android:usesCleartextTraffic="true"

<application
    android:usesCleartextTraffic="true" // -->here
    android:allowBackup="true"
    ...
    >

But its recommend to use only HTTPS

Answer 3

Do you solve the problem? I have the same issue