image does not load in Ionic Capacitor when I am in production mode, but it is in development mode

Issue

in my project I use javascript Image class to load an image inside my code.

When I test in the development environment, the image integrates perfectly, and I can use it within my project very well, in fact I get the url, and it is this:

"http://192.168.1.101:8100/assets/App_-_Logo.jpg"

But when I compile the application in production mode, the image is skipped, apparently It does load it because no error appears, the promise is completed correctly, but when I try to use the image it has no effect, as if it did not exist, I got the url you have with capacitor, and I could notice that it is different:

"capacitor: //localhost/assets/App_-_Logo.jpg"

it's the only difference

Is there any trick to load the images with capacitor en production mode?

I am using Ionic / Angular The implementation is properly handled with a promise and an await to wait for the image to load

Solution

I was faced with that exact problem a short time ago.

The quick way I came up with fixing it was to upload the image to a web server to have an HTTPS address, and it won't change between environments.

That way, it worked well for me.

Although it would be better to have to save that get every time App needs it, it is the only way that worked.

If you know of another way to solve it, let me know.

Answered By - Ing. Alejandro Villalón