No local image showing in view on device

ionic-v1
1

Hi there,

it’s really a simple task that won’t work and I don’t get it why since three days. Oh please, help someone! My brain gets hurt.

So I’ve an Android device with Android 4.4.2 (not rooted or anything). In my download folder at “/storage/emulated/0/Download” is a jpeg, lets call it “success_016.jpg”.

I can look at that pic with chrome (device browser) by requesting: “file:///storage/emulated/0/Download/success_016.jpg”, allright, file is accessible and not broken.

So, I create a new blank ionic project with: “ionic start whatever blank”. The new project gets the Android platform with the cli call: “ionic platform android”.

I keep everything unchanged, but insert in the index.html:
<img src=“file:///storage/emulated/0/Download/success_016.jpg” />
between the ion-content tags.

I start the app with: “ionic run --livereload --consolelogs --serverlogs android”, and the app starts on the device successfully, but the app doesn’t show the local image on the device (and it is there, explicitly).

Changing the attribute of the image-tag to “ng-src”? Nope, no differences. Changing to an remote file (via http://…)? Yep, it shows the remote file. Changing back to the local file (via file://… see above). Nope, it won’t show the local file from device.

I know, there are app folders and i should use the one of the app. No luck anyway. The local picture on device don’t got be shown in any view or img-tag with no src-attribute or ng-src-attribute. It’s a simple local html file request and it does not work!

Oh please HELP! I do not get it why the view won’t show the local html requested jpg file. Can anybody make my day?
Thx!

PS: I wrote an(other) app that downloads pictures (sync-process) to something like: “/storage/emulated/0/Android/data/com.ionicframework.work1234/files/”. But if I try to show a picture in that path <img src=“file:///storage/emulated/0/Android/data/com.ionicframework.work1234/files/mypic.png” IT WONT GOT SHOWN :frowning:

There is the img-folder in my project-folder, path: www/img on my Windows development work station. If I place the mypic.png to that folder, I can SHOW it with <img src=“img/mypic.png”>. No problem. The problem is only … I don’t know, how to place it on download (with cordova-filetransfer) to that project-img-folder (at www/img).

Why? Look …

I have TotalCommander (file explorer) on my Android. I search for that folder or picture but it’s not there. If I could find and access (even with cordova-file) the path of www/img, I would download and place the pictures to that folder and show them in a view with the img-tag and the relative path src=“img/mypic.png”. But even mypic.png cannot be found on the hole device file system nor the path to www/img.

I request the download target path in that other project with cordova.file.externalDataDirectory …

Another test …
I create a local html file:
<img src=‘file:///storage/emulated/0/Android/data/com.ionicframework.work954801/files/tab_filialen/2_pic_1.jpg’/><br>
<br>
<img src=‘http://mic.hit-karlsruhe.de/projekte/WS13_GPS/DokuWeb/GPS%20Device/images/Vor_Nachteile/Microcontroller.jpg’/>

The first image tag loads a local image. The second loads a remote one. I start that local HTML-file in the Chrome browser on the Android device. It shows me the local and remote file. So … local file access with absolute paths are no problem for the device.

The view in the app is (I think so) a html-page. It has absolute paths to local image files. But it WONT show that images. If I replace those absolute local image paths to remote local image path, the pictures in the app on that html page / ionic-view gets shown. Why not for local files??? What am I missing?

1 Like
2

Hi again,

logcat of adb tells me something like „Not allowed to load local resource: file:///…“. Okay then I think it is for ionic project not possible to use external local resources :frowning: that IS really bad!

But I found a work around, where I think, this cannot be the solution: With $cordovaFile.readAsDataUrl(„file:///…“, „myPic.png“) I request the content oft he file. In the resolve-Method I put the result in the src-property of the img-tag and … it show the local resource.

Something like this:

  • In View

  • <img src=“{{ imgSrc }}“ />

  • In Controller

  • $cordovaFile.readAsDataUrl(„file:///…“, „myPic.png“).then(
    function(res) { $scope.imgSrc = res; },
    function(error) { alert(‚Arrrgh!‘); }
    );

This works … But this cannot be truth! It seems to me, that this is not a clean solution, but a workaround.

What I’ve to do to load local resources, like <img src=“file:///…/myPic.png“ /> ??? Can anyone answer this simple question? How to set permissions to allow chromium to use local resources on Android?

My config.xml has that tags …
<allow-navigation href=""/>
<allow-intent href=""/>
<access origin="*"/>

3

Hi,

Did you try the whitelist plugin as describe here ?

regards

4

Yes I tried and I’m using cordova-plugin-whitelist.

Index.html has
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Config.xml has
<allow-navigation href="*"/> <allow-intent href="*"/> <access origin="*"/>

Sorry, but still no local resources allowed 

Can’t it be so simpel? Lets say, there is a file „myPic.png“ in „file:///storage/emulated/0/download“ (or whatever) allready existing. And my ionic view has a img-tag with src=“file:///storage/emulated/0/download/myPic.png“. Logcat still tells me: „chromium: Not allowed to load local resource“.

5

Hello again,

so I’m workin on Android 4.4.2. It seems to be a restriction of the os, that the webview chromium cannot access local resources.

I tested the simple local resource request to “file:///storage/…/mypic.png” on an Android 4.3 and there it worked everything like expected.

So … the problem is, that cordova/ionic has no restriction handling for Android 4.4+. The main problem is, that ionic/cordova doesn’t offer permission handling for Android 4.4+ restrictions based on request to local resources by the webview chromium.

Or is there a way to handle the Android 4.4±restrictions for my ionic/cordova project?

6

Resolved now

And … here is the solution!

So it is EXPLICITLY needed to allow access to local file resource at Android 4.4+.

It is NOT enough to set following line ONLY to your config.xml:
<allow-navigation href="*"/>

You will have to set the next line on Android 4.4+, too:
<allow-navigation href="file://*/*" />

Dont forget for your index.html:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Regarding to http://stackoverflow.com/questions/30326148/cordova-ionic-http-request-not-processing-while-emulating-or-running-on-dev … I had a suspicion.

4 Likes
7

have you tried running your build without the livereload option. that has been my problem in the past. livereload pulls you files from your workstation and not the device.

3 Likes
8

Yes I tried and it runs ONLY in run mode, not in livereload mode because of the workstation/device issue. Just check location.href.

Greets!

9

Hi, I’m facing the same problem with livereloading, waht to you mean with location.href?

regards
Meex

10

Hi there,

location.href is a js-property. Just console.log(location.href); to see, “where” your app is when running in different mode (like live mode, run mode or that fancy serve mode in the browser). It will return the entire URL of the current page.

In live mode you will get a result pathing to your local client (with ip etc.). In run mode you’ll get a result pathing to your local assets directory on your device.

To break out to other local resources on your device you’ll need <allow-navigation href="file://*/*" /> in the config.xml of your project (for run mode on Android 4.4+ devices), if you want to access local resources in your WebView, like <img src="file:///.../mypic.png">

2 Likes
11

Thank you for your detailed answer! So when I undestood right, there’s no way to get this working with --livereload?

Meex

12

No, I don’t think so. If you find a way, tell me :smile:
And … to debug in run mode you can use adb logcat.

Here’s a batch I use on work:
adb devices -l call adb logcat -c start adb logcat *:s chromium:d -c ionic run android --device exit

… to show console.logs of my app only.

13

Little bit optimized:

adb devices -l
call adb logcat -c
call ionic run android --device
adb logcat *:s chromium:d -c

… end it with ctrl+c.

14

Hello

I have the same problem with local files not shown in my app and I’ve tried to make it work on my mobile phone version 4.3 but I couldn’t. I have also added the tags but still not working (I deployed my app using ionic run android without live reload). Any suggestions?

15

It worked for me, thank you very much

16

Happy happy happy joy joy joy

17

Thanks for your solution, any way to solve with livereloads active?

18

hey @HappyHappyJoyJoy ,
thanks man
you have no idea how log I have waited for this solution.
thank you so much