Ionic/Angular cant see images in real phone

Issue

I have a project about the film-tv series list. But photos isn’t seenable in the real phone. I can see it in an emulator or ionic lab but I can’t see it on my real phone.

 <img style="margin-left: 5%; border-radius: 15px;"  src="http://image.tmdb.org/t/p/w500{{item.poster_path}}" height="250px" width="250px"  >

It’s my code about img. When I use it like that I can see on an emulator like: https://prnt.sc/12jdedl

But when I open it from my phone its shows like: https://prnt.sc/12jddef how can I fix it? Thanks for the help!

Solution

The error is: ERR_CLEARTEXT_NOT_PERMITTED

From: https://stackoverflow.com/a/67127207/1772933

First, create the Network Security Config file here YOUR_IONIC_APP_ROOT\android\app\main\res\xml\network_security_config.xml.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
   <domain-config cleartextTrafficPermitted="true">
        <domain>www.example.com</domain>
   </domain-config>
</network-security-config>

Then edit YOUR_IONIC_APP_ROOT\android\app\main\AndroidManifest.xml adding android:networkSecurityConfig="@xml/network_security_config" to application.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.ionic.starter">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        
        android:networkSecurityConfig="@xml/network_security_config"

        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- ... -->
    </application>
    <!-- ... -->
</manifest>

Answered By – Kinglish

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0