Ionic/Angular cant see images in real phone

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!

Can you view a web inspector on your mobile phone (via usb cable)? You can get more information about what's going wrong. — Kinglish, May 05 '21 at 22:35
@JohnTyner i just sent to android studio then connect my phone via usb cable then open my app but cant see anything. How can i open web inspector while i am in my apk ? — Uğurcan Uçar, May 05 '21 at 22:42
@JohnTyner ı checked from my computer its all looks fine. That source URL is right too when i open that url from my phone manually i can see that image from google but with program i dont know why its not showing — Uğurcan Uçar, May 05 '21 at 23:32
You can use Chrome to inspect `chrome://inspect/#devices` - I would look to see if it was being reported as a 404 (file not found in the network tab) - or perhaps ionic/angular is blocking the image (would show up in the errors tab). — Kinglish, May 05 '21 at 23:43
@JohnTyner Thank you ! I tried it and i can see photos now with chrome inspect. But when i open my apk file i still cant see . Its so odd i cant understand why — Uğurcan Uçar, May 05 '21 at 23:49
What I am suggesting is to run the app on your phone - using the deployed APK file. Then plug the phone into the computer, mount the device using inspect/#devices - and then look at the inspector. If the image is a 404 somehow the wrong data is going to the `` tag. Also, make sure you're using @DavidB recommendation below. — Kinglish, May 05 '21 at 23:59
@JohnTyner I finally found error code. Its saying : ERR_CLEARTEXT_NOT_PERMITTED do you know how to fix it ? — Uğurcan Uçar, May 05 '21 at 23:59
@JohnTyner I tried his recommendation too but it didnt work becouse of that error i guess. After i fix it it will work im so sure — Uğurcan Uçar, May 06 '21 at 00:00
@UğurcanUçar Just want to clarify, are you using Cordova or Capacitor? `ERR_CLEARTEXT_NOT_PERMITTED` showing up because webview doesn't allow plain http protocol. You simple fix it by using `https` URL protocol, or opt-out [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) — Snowbases, May 07 '21 at 13:25

score 2 · Answer 1 · answered May 05 '21 at 19:34

2

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"  >

answered May 05 '21 at 19:34

David B.

695
5
10

B Thank you for your answer. But its still same result. In emulator i can see images but on my device i still cant see that photos. – Uğurcan Uçar May 05 '21 at 21:56
when you are free can you help me again brother ? I need your help – Uğurcan Uçar May 05 '21 at 23:30
Seems like @John Tyner already found a solution. Some security http or CORS issue would have been my second guess. – David B. May 06 '21 at 10:48

Kinglish · Accepted Answer · 2021-05-06T00:19:55.213

0

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>

edited May 06 '21 at 00:19

answered May 06 '21 at 00:02

Kinglish

23,358
3
22
43

I dont have resources folder on my visual code . I saw that folder from few videos but in mine i dont have that – Uğurcan Uçar May 06 '21 at 00:10
I changed my answer - try it out – Kinglish May 06 '21 at 00:20
@JohnTyler I wish i can do but i dont have enough reputation for now. But when i have it i will do it! – Uğurcan Uçar May 06 '21 at 00:36
@UğurcanUçar If you're using Cordova then you need to generate it by using `ionic cordova resources`. If you're using Capacitor then follow [this answer](https://stackoverflow.com/a/61740040/7401054) – Snowbases May 07 '21 at 13:35

Ionic/Angular cant see images in real phone

2 Answers2