Ionic/Angular cant see images in real phone - angularjs

Question

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!

Answer 1

Welcome to Stackoverflow. Your curly brackets {{...}} sit in the middle of the src string. They don't have a string interpolation feature. In order to combine two strings in the angular template you may try this:
<img style="margin-left: 5%; border-radius: 15px;" [src]="'http://image.tmdb.org/t/p/w500' + item.poster_path" height="250px" width="250px" >

Answer 2

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>