Not allowed to load local resource: file?

Hello all,

We are developing a Hypbrid application in Ionic. Our client asked a B2B sales application that needed to work online and offline.
Our application fetches all our data from a MySQL database and saves all the data to a Sqlite db.

We have about 9000 products that we store and every product has a couple of images (in total approx. 40.000 images).
The images are synced in base64 encoding and are then converted to a jpg that we save locally on the tablet.

The only problem that we are facing right now is that we don’t have the permission to show the image in the view.
We always get this error: “Not allowed to load local resource: file:///var/mobile/Containers/Data/Application/03DA2D04-BEDB-404A-990B-06F3CF84B209/Library/NoCloud/img_products/12407.jpg”
Does anybody know how to fix this problem?

Are we storing the images in the wrong directory or retrieving them in an incorrect way?

Thank you in advance!

1 Like

Hi leendert, have you found a solution for this problem? I’m having the same and DomSanitizer didn’t help me.

Update: fixed by applying three steps:

  1. Read as base64 from filesystem using ionic-native File plugin:
    File.readAsDataURL(cordova.file.dataDirectory, fileUrl).then(imageBase64 => {
    self.urlToShow = imageBase64;
    });
  2. Sanitize the base64 url:
    get imageURLSanitized() {
    return this.sanitizer.bypassSecurityTrustUrl(this.urlToShow);
    }
  3. in HTML use sanitized url as [src]
    <img [src]=“imageURLSanitized”>
3 Likes

Hi @leendert,
Have you solved the problem.I am having the same issue but my images are not encode.

Thanks.

hi , i am facing same problem , i am saving image in external root directory it’s showing also in device but when in trying to show in getting not allowed to load local resources,

Hope you found fix for this.

Hi,
Use this
window.Ionic.WebView.convertFileSrc(filePath)

1 Like

Hi asopin,

I also have the same problem. Is your code work on IOS?

same issue outthere. I’m using convertFileSrc(). Works great on android device but fails on iOS.
Plugin WebView 3.1.1

1 Like

are you find any solution for ios ?

I was forced to downgrade the uiView engine in config.xml for ios. Then it worked

ok thanks. for now i used convertFileSrc() for full fill my android requirement.

1 Like

I also have the same problem and not working on iOS platform.