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

Hi, 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

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.

1 Like