Image not showing on app but show on browser

1

Hi.
I’m trying to load image from Api, everything works great in the browser but when I build apk on the device show icon of broken image.

this is my img <img src={props.logo} />
I’m receiving all data from props including the address of the JPG image.Image is showing when I type the address in the browser. And it’s showing in “npm run start” on browser but not on the phone or emulator.

I googled and search this forum, but no help.This is problematic for me because I don’t know how to “inspect” what’s wrong with this on the phone. In browser I have dev options but in browser everything works fine.
Anybody have an idea what’s the problems. And also how can I “inspect” those kind of problem. Thoes android emulator from Android studio have some kind of “inspec element”?

2

Can you share your code???

3

for some reason some images will load and some wont on the device.

Here is a screenshot.If I put a link to f7 logo it will load on the device but second under won’t. I try with different images they don’t load.But in browser they all load.

imgproblem
imgproblem1011×519 23.7 KB

4

still i cant fix the problem.

if somewhere on any page or component I create <img src="url to image"/> from some source image will load from other sources won’t. But on the browser they all load just on device after building apk some source won’t work.

5

Are you sure you have added quotes around the src? Otherwise that could be a issue.

And maybe the console or network inspector shows an error?

6

It’s not because quotes.
So if I put these images links to home. jsx or other component like this:

1
1943×116 4.31 KB

then when I run “npm run start” both images showing
2

But when I run “npm run build-dev-cordova” and after building debug. apk file if I add him on the emulator or phone device it show me this

3

It’s not showing image from a second source. And I try multiple different sources. but this f7 logo show or some other images.

Maybe it’s something with webpack, I don’t know, but I’m stuck in this stupid problem.

And dev console in browser is clean,as i say on browser everthing working fine,no errors.

7

Have you checked the device inspector console inspector via Safari/chrome?

8

In that last example you showed, the broken image was http and the working image was https. Maybe something in your app (or at the system level) is preventing loading non-https content?

9

yeah. Default framework7-Cordova app will block http source for audio, video and images.
There is whitelist plugin that should allow configuration, but for now I can’t make it to work.

I follow insctructions but still no luck.

and if i add this to index.html

<!-- This policy allows everything (eg CSS, AJAX, object, frame, media, etc) except that 
    * CSS only from the same origin and inline styles,
    * scripts only from the same origin and inline styles, and eval()
-->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Cordova say this should allow eveything but in my case this block everything,even local icons.

10

Omg finally its working. So apparently there is some bug " cleartext-not-permitted

it work after i add this to my cordova > config.xml <platform name="android"> <access origin="*" /> <preferance name="android-usesCleartextTraffic" value="true" /> <allow-navigation href="*" /> </platform>