Rare problems loading local images in the webview, url is correct, and file exists

[sithwarrior]

Im having a hard time trying to eliminate this bug.

We have an app thats in production, it works online an offline, so we download any images that are needed, and display them using the built-in normalize url feature in the ionic wkwebview. For reasons, we have an onload handler, to detect image size, our code looks something like this.

let img = new Image();
img.onload = () => {
//get image size code
}

img.onerror = (onError) => {
//this should not be happening!!
//we actually use window.resolveLocalFileSystemURL, create a fileobject, 
//and then check the filesize, to see if the image exist at the provided url... 
//it does.

img.src =  window.Ionic.WebView.convertFileSrc(url)

This works mostly, but we use error reporting and a semi large amount of users, get failed loads from time to time, only using WKWebview on iOS.

Any good ideas to debug this edgecase?

As it works almost always, we are having a hard time reproducing it locally.

Almost forgot, when we get the Error, the error event only includes: { isTrusted: true }

Indicating, its from a different domain. However, both the image and the code, should be served from: localhost:8080 So we should be getting the full event, shouldnt we?

[sithwarrior]

I just tried debugging this some more..

If I log the onload or onerror event when testing, I get the full event body.

But somehow our users, when hitting the error, get the CORS error equivalent of a simple event { isTrusted: true }

So Im thinking maybe the WKWebview stops working our restrics the element or something completely different.

Any ideas @jcesarmobile ? you seme to be the expert around these parts.

[tryhardest]

Have you tried to downgrade the plugin @sithwarrior ? Or did you get it working (if so how)? Lots of unmerged PR waiting on a new release here even though they have all cleared testing cc @jcesarmobile

[ZumelzuR]

This error happens in ios. The problem is that you don't have permissions to access to the url reference, you can try to add the rights "allow" tags on the config.xml but didn't work for me.

The solution is to not use a URL that reference to the file system or a blob. For example you can transform the blob or the svg or whatever image format you have to base64 url like:

  renderPictureAsBase64(image) {
    return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(image)))
  }

then you can do

img.src = this.renderPictureAsBase64url);

(In my case the "image" was a svg tag like <svg ...>, but you can take an image and parse it to base64 and will work, just take care or add the proper mimetype like "data:image/svg+xml;base64," for svg.)

[sithwarrior]

Have you tried to downgrade the plugin @sithwarrior ? Or did you get it working (if so how)? Lots of unmerged PR waiting on a new release here even though they have all cleared testing cc @jcesarmobile

Sorry for the late reply, i have tried various release versions of the plugin without luck, This is a problem that only happen from time to time, so we are having a hard time reproducing it locally.

[sithwarrior]

This error happens in ios. The problem is that you don't have permissions to access to the url reference, you can try to add the rights "allow" tags on the config.xml but didn't work for me.

The solution is to not use a URL that reference to the file system or a blob. For example you can transform the blob or the svg or whatever image format you have to base64 url like:

  renderPictureAsBase64(image) {
    return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(image)))
  }

then you can do

img.src = this.renderPictureAsBase64url);

(In my case the "image" was a svg tag like <svg ...>, but you can take an image and parse it to base64 and will work, just take care or add the proper mimetype like "data:image/svg+xml;base64," for svg.)

Yeah this is not the issue, and would be very impractical for us, as we have a gallery of potentially hundreds of images. We use the window.Ionic.WebView.convertFileSrc() method as described in the docs.