Not allowed to load local resource #183

macklus · 2018-08-06T09:55:57Z

Hi:

I using:

Ionic: 4.0.3
Ionic Framework: ionic-angular 3.9.2
Ionic image Loader: 5.0.5

when i try to load an image, i get error:

"Not allowed to load local resource: file:///data/user/0/MI_APP_ID/cache/image-loader-cache/-919523643", source: http://localhost:8080/ (0)

any hint about this problem ?

thanks in advance.

Ross-Rawlins · 2018-08-07T12:43:57Z

Got this same issue on android did you resolve it?

Ross-Rawlins · 2018-08-07T14:24:03Z

I only got this issue when using ionics latest webview which also causes issues with other plugins. I rolled back the webview and its working now.

macklus · 2018-08-07T15:12:32Z

How do you do that ?
Anyway, i hope problem can be solved, latest webview is better than old one

mateusknob · 2018-08-07T16:58:55Z

Having the same issue over here on a Android device (on browser works fine)

mateusknob · 2018-08-07T17:50:52Z

setting the return type to base64 works!

this.imageLoaderConfig.setImageReturnType('base64');

it's not the best solution, but...

macklus · 2018-08-07T18:27:44Z

@mateusknob can this option be globaly configure ?

mateusknob · 2018-08-07T19:10:48Z

@macklus yes, check this section:

https://github.com/zyra/ionic-image-loader#global-configuration

ghost · 2018-08-21T08:03:47Z

You need to perform 2 actions to resolve.
a) install https://cloud.google.com/storage/docs/gsutil_install
b) browse to the home directory where you instal google cloud sdk (a) above > gsutil
c) Run in terminal > gsutil cors set cors.json gs://

If you want to logout from all the accounts run the following command

gcloud auth revoke --all
If you want to logout from a specific account then run the following command

gcloud auth revoke <your_account>
If you want to login with a different account, you can run the following command

gcloud auth login

Then

import { ImageLoaderConfig } from 'ionic-image-loader';
constructor(
private imageLoaderConfig: ImageLoaderConfig) {
 this.imageLoaderConfig.setImageReturnType('base64');
}

Ionic info

ionic (Ionic CLI)  : 4.0.5 
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.0

Ref: Documents :
a) https://firebase.google.com/docs/storage/web/download-files
b) https://cloud.google.com/storage/docs/gsutil_install

ghost · 2018-08-21T08:06:06Z

@mateusknob - your solution worked with an extra research and more steps implemented as above, thanks!

Shtibel · 2018-09-03T09:58:20Z

Can confirm.
The new ionic webview plugin is the cause for the problem.
The new plugin: cordova-plugin-ionic-webview @ 2.x seem unstable...

You can follow the issue I opened there:
ionic-team/cordova-plugin-ionic-webview#158

I downgraded back to cordova-plugin-ionic-webview@1.2.1 and all works grate.

Steps:

uninstall webview
ionic cordova plugins rm cordova-plugin-ionic-webview
install old one:
ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
clean cordova
cordova clean android

By the way angular-cropperjs is also not working with the new webview.

macklus · 2018-09-04T08:15:45Z

just for confirm, solution of @mateusknob is working ??
i do prefer do that before downgrade webview

Shtibel · 2018-09-04T09:05:08Z

Hi @macklus
I can confim this is working for me

macklus · 2018-09-07T08:03:29Z

@Shtibel sadly, its not working for me.
can you please paste your package.json file to compare ?
thanks

shriniwasb · 2018-09-10T07:51:28Z

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

SmirnovM91 · 2018-09-13T07:10:25Z

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

Where should I use it?

shriniwasb · 2018-09-13T07:56:11Z

Hi @SmirnovM91,

Cordova and Capacitor apps are hosted on a local HTTP server and are served with the http:// protocol. Some plugins, however, attempt to access device files via the file:// protocol. To avoid difficulties between http:// and file://, paths to device files must be rewritten to use the local HTTP server. For example, file:///path/to/device/file must be rewritten as http://://path/to/device/file before being rendered in the app.

For Cordova apps, the Ionic Web View plugin provides a utility function for converting File URIs: window.Ionic.WebView.convertFileSrc(). There is also a corresponding Ionic Native plugin: @ionic-native/ionic-webview.

Please check this below link
https://beta.ionicframework.com/docs/building/webview/

ihadeed · 2018-09-17T07:13:29Z

Is this still an issue with the latest releasE?

flore2003 · 2018-09-19T20:34:30Z

Yes, it is. I traced it down to the getCachedImagePath method in image-loader.ts. It checks the isIonicWKWebView getter, which in turn checks the isWKWebView getter, which only evaluates to true on iOS. When using Ionic on Android, the file URI is never transformed for Ionic and thus the error is thrown. I might be able to create a pull request later today, if you would be interested in having this issue fixed 🙂

flore2003 · 2018-09-19T20:56:29Z

There it is ☝️

b1ueRa1n · 2018-11-27T11:37:43Z

@Shtibel Thank you very much! The new ionic webview plugin is the cause for the problem.

b1ueRa1n · 2018-11-28T03:37:08Z

Yes, I had found another solution.

in .html
<img [src]="getTrustImg(imageSrc)" />

in .ts
private win: any = window;

getTrustImg(imageSrc){
let path = this.win.Ionic.WebView.convertFileSrc(imageSrc);
console.log(path);
return path;
}

Sampath-Lokuge · 2018-12-07T15:12:57Z

This is the version where it works for me on Ionic 3.9.2 app.

https://github.com/ionic-team/cordova-plugin-ionic-webview/releases/tag/v1.2.1

borodatych · 2018-12-20T10:18:27Z

import { normalizeURL } from 'ionic-angular';
...
this.camera.getPicture(options).then((imageUri:any) => {
imageUri = normalizeURL(imageUri);
...
https://ionicframework.com/docs/wkwebview/

pcsantana · 2019-01-08T19:33:15Z

Hi!
Is this still an issue?

After a update the cordova-plugin-ionic-webview to 2.x , the image stopped to load, but no errors throws.
The path is like it:
http://localhost:8080/_file_/data/user/0/<app_id>/cache/image-loader-cache/-601073275

Any idea?
Thank you!

pengkobe · 2019-01-11T08:51:52Z

after i using convertFileSrc to transform url. my logs shows Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME. anyone got any ideas?

b1ueRa1n · 2019-01-13T14:09:55Z

after i using convertFileSrc to transform url. my logs shows Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME. anyone got any ideas?

What is your local file path?

b1ueRa1n · 2019-01-13T14:27:23Z

Hi!
Is this still an issue?

After a update the cordova-plugin-ionic-webview to 2.x , the image stopped to load, but no errors throws.
The path is like it:
http://localhost:8080/_file_/data/user/0/<app_id>/cache/image-loader-cache/-601073275

Any idea?
Thank you!

You can try to upgrade to 3.x version, and call the "convertFileSrc" function.

giovannipds · 2019-01-25T19:40:45Z

Use this and be happy. Do not downgrade as proposed by @Shtibel anymore, there's already a solution:

ionic cordova plugin add cordova-plugin-ionic-webview
npm install --save @ionic-native/ionic-webview@beta

import { WebView } from '@ionic-native/ionic-webview/ngx';

constructor(private webview: WebView) { }
...
img = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png')

Note 1: do not forget to register Webview at your .module.
Note 2: pay attention that this will change a lot your project so you must replicate it everywhere it's needed (someone below said it had broken all the project images.

❤️

Sampath-Lokuge · 2019-01-26T09:46:28Z

@giovannipds Your solution will not work with the Ionic 3 app since it requires ionic native 5+ with Angular 7+. So need to use webview 3+ without Ionic native 5+ wrapper like so: https://stackoverflow.com/a/54269144/1077309

fixed wkwebview bug #183 for iOS and removed deprecated method normalizeURL

brenden-t-r · 2019-03-07T17:48:18Z

@giovannipds

After hours of trying a million suggestions, this is what worked.

derman10 · 2019-04-09T20:01:21Z

Can confirm.
The new ionic webview plugin is the cause for the problem.
The new plugin: cordova-plugin-ionic-webview @ 2.x seem unstable...

You can follow the issue I opened there:
ionic-team/cordova-plugin-ionic-webview#158

I downgraded back to cordova-plugin-ionic-webview@1.2.1 and all works grate.

Steps:

uninstall webview
ionic cordova plugins rm cordova-plugin-ionic-webview

install old one:
ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1

clean cordova
cordova clean android

By the way angular-cropperjs is also not working with the new webview.

doing this broken all the image of the project.

CraigAndrew · 2019-06-20T20:37:11Z

What worked for me is simply going to the package.json file of my project root, updating the "cordova-plugin-ionic-webview" entry like so:
"cordova-plugin-ionic-webview": "2.0.0-beta.2",

Then run the 2 commands:

npm i
ionic cordova run android

mshallaq · 2020-02-03T15:45:46Z

the best solution to this problem is to start using Visual Studio and then install a Live Server Extention then go live command from the footer of the page.

azad47808 · 2020-02-20T12:59:34Z

private win: any = window;

let savePath = this.win.Ionic.WebView.convertFileSrc(path);

stephan-strate mentioned this issue Aug 16, 2018

Fatal: crashes on ios #181

Closed

ihadeed added the needs reply label Sep 17, 2018

flore2003 mentioned this issue Sep 19, 2018

WIP: fix(image-loader): Wrong path with Ionic on Android #194

Merged

madoBaker closed this as completed in #194 Sep 19, 2018

madoBaker reopened this Sep 19, 2018

madoBaker closed this as completed Sep 19, 2018

This was referenced Jan 23, 2019

fixed wkwebview bug #183 for iOS and removed deprecated method normalizeURL #232

Merged

Images from external sources not loading #216

Open

ihadeed added a commit that referenced this issue Feb 11, 2019

Merge pull request #232 from Unkn0wn0x/master

972d9b1

fixed wkwebview bug #183 for iOS and removed deprecated method normalizeURL

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not allowed to load local resource #183

Not allowed to load local resource #183

macklus commented Aug 6, 2018

Ross-Rawlins commented Aug 7, 2018

Ross-Rawlins commented Aug 7, 2018

macklus commented Aug 7, 2018

mateusknob commented Aug 7, 2018

mateusknob commented Aug 7, 2018 •

edited

macklus commented Aug 7, 2018

mateusknob commented Aug 7, 2018

ghost commented Aug 21, 2018 •

edited by ghost

ghost commented Aug 21, 2018

Shtibel commented Sep 3, 2018 •

edited

macklus commented Sep 4, 2018

Shtibel commented Sep 4, 2018

macklus commented Sep 7, 2018

shriniwasb commented Sep 10, 2018

SmirnovM91 commented Sep 13, 2018

shriniwasb commented Sep 13, 2018

ihadeed commented Sep 17, 2018

flore2003 commented Sep 19, 2018

flore2003 commented Sep 19, 2018

b1ueRa1n commented Nov 27, 2018

b1ueRa1n commented Nov 28, 2018

Sampath-Lokuge commented Dec 7, 2018

borodatych commented Dec 20, 2018 •

edited

pcsantana commented Jan 8, 2019

pengkobe commented Jan 11, 2019 •

edited

b1ueRa1n commented Jan 13, 2019

b1ueRa1n commented Jan 13, 2019

giovannipds commented Jan 25, 2019 •

edited

Sampath-Lokuge commented Jan 26, 2019 •

edited

brenden-t-r commented Mar 7, 2019 •

edited

derman10 commented Apr 9, 2019

CraigAndrew commented Jun 20, 2019

mshallaq commented Feb 3, 2020

azad47808 commented Feb 20, 2020

Not allowed to load local resource #183

Not allowed to load local resource #183

Comments

macklus commented Aug 6, 2018

Ross-Rawlins commented Aug 7, 2018

Ross-Rawlins commented Aug 7, 2018

macklus commented Aug 7, 2018

mateusknob commented Aug 7, 2018

mateusknob commented Aug 7, 2018 • edited

macklus commented Aug 7, 2018

mateusknob commented Aug 7, 2018

ghost commented Aug 21, 2018 • edited by ghost

ghost commented Aug 21, 2018

Shtibel commented Sep 3, 2018 • edited

macklus commented Sep 4, 2018

Shtibel commented Sep 4, 2018

macklus commented Sep 7, 2018

shriniwasb commented Sep 10, 2018

SmirnovM91 commented Sep 13, 2018

shriniwasb commented Sep 13, 2018

ihadeed commented Sep 17, 2018

flore2003 commented Sep 19, 2018

flore2003 commented Sep 19, 2018

b1ueRa1n commented Nov 27, 2018

b1ueRa1n commented Nov 28, 2018

Sampath-Lokuge commented Dec 7, 2018

borodatych commented Dec 20, 2018 • edited

pcsantana commented Jan 8, 2019

pengkobe commented Jan 11, 2019 • edited

b1ueRa1n commented Jan 13, 2019

b1ueRa1n commented Jan 13, 2019

giovannipds commented Jan 25, 2019 • edited

Sampath-Lokuge commented Jan 26, 2019 • edited

brenden-t-r commented Mar 7, 2019 • edited

derman10 commented Apr 9, 2019

CraigAndrew commented Jun 20, 2019

mshallaq commented Feb 3, 2020

azad47808 commented Feb 20, 2020

mateusknob commented Aug 7, 2018 •

edited

ghost commented Aug 21, 2018 •

edited by ghost

Shtibel commented Sep 3, 2018 •

edited

borodatych commented Dec 20, 2018 •

edited

pengkobe commented Jan 11, 2019 •

edited

giovannipds commented Jan 25, 2019 •

edited

Sampath-Lokuge commented Jan 26, 2019 •

edited

brenden-t-r commented Mar 7, 2019 •

edited