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

Is this an iOS app or an Android app?

On android it’s not recommended to use capacitor as scheme but use http or https.

Also angular doesn’t like unknown schemes such as “capacitor” and you have to tell it to trust it.

So hard to help you with the little information you provided as it doesn’t include anything about how you are loading the image (code)

Hello @jcesarmobile, Thank you very much for your time; I will gladly give you the details.

I’m using this function to get the image that I need:

async getImage(url: string) {
    return new Promise<HTMLImageElement>((resolve, reject) => {
      let img = new Image();
      img.src = url;
      img.onload = () => resolve(img)
      img.onerror = reject
    });
  }

I’m testing the app in IOS,

How can I tell angular to trust the capacitor schema?

angular prepends unsafe: scheme to capacitor: scheme by default and that makes the images to not display.

To tell angular the url is safe you can use DomSanitizer bypassSecurityTrustResourceUrl

I’m not an angular expert, so there might be a better way, AngularJS had a way of globally setting a scheme as safe, but I couldn’t find that setting in Angular.

I got it, I going to try it, and I’ll back with the results.
You will read about me soon, while things go well for you.