Image not showing on app but show on browser

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”?

Can you share your code???

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.

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.

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?

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

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

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


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.

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

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?

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.

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>