Displaying image file from Android filesystem

I’m trying to load an image from the filesystem in a page with no success. The page shows a broken link. This is my code:

<ul>
                  <li ng-repeat="image in images">
                    <img ng-src="{{image}}" />
                    {{image}}
                  </li>
                </ul>

I see the image path printed out on the page but the image tag itself shows a broken link.

When I use a link to an external image (say this: http://www.independent.co.uk/incoming/article9195768.ece/BINARY/original/Rosicky.jpg) it works alright. So it must be something with cordova being unable to provide the picture at the path.

This is what the path I get from cordova looks like: cdvfile://localhost/persistent/DCIM/Camera/1395167011485.jpg.

Anyone had any success with loading images from the Android filesystem?

it is

cdvfile://localhost/persistent/DCIM/Camera/1395167011485.jpg.

OR

file://localhost/persistent/DCIM/Camera/1395167011485.jpg.

I have the same problem and I’m not using Ionic. Probably angularjs doesn’t like the cdvfile protocol.
At the moment i’m setting the src in the old way: document.getElementById(‘myImageId’).src= 'cdvfile://localhost/[something]/1395167011485.jpg’
If anyone find a better solution that would be appreciated.

More about the cdvfile thing: http://cordova.apache.org/news/2014/02/10/plugins-release.html

I had an exchange with one of the Cordova guys here: https://issues.apache.org/jira/browse/CB-6300.

Basically, you need to install the org.apache.cordova.file-system-roots plugin and that will enable you to resolve the paths that the camera plugin returns to a physical file on the filesystem. However, you will still need to do a bit of work to get the image path returned from picking an item from the gallery since the URL that the camera plugin returns in that case has a cache-busting timestamp attached to it as a query string. Alternatively, you may have to remove any kind of post-processing in order to escape having the picture go to a temp location.

Settings such as targetWidth, targetHeight, and, most recently, correctOrientation will all call for some kind of post processing and thus the need to use a temp filesystem.

Hope this helps in some way.

3 Likes

Hi I had similar a problem with cordova and getting the image from the album… The image was represent with blob: prefix similar like your case with file: or cvfile, when I was puting the blob data with angular {{img}} notation I also get the broken link the reason is that angular is putting unsafe: prefix before link… If this is your case try to put in config of the main module …

var app = angular.module( ‘myApp’, )
.config( [
‘$compileProvider’,
function( $compileProvider )
{
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile):|data:image//);
}
]);

I hope this helps you it was to me…

4 Likes

Thanks! This $compileProvider change did the trick for me. I’ve been searching for a solution all day.

In my case I also added |content to the list of prefixes.

2 Likes

Any chance can you please provide some example. i am looking for this.

Pls Help me, i am getting error as “content://com.android.providers.media.documents/document/image%3A5047” this error in alert msg in android mobile. may i know how to fix this???

Well, thank you! It worked for me after adding “|content” too. :smile:

Hi I’ve the same problem, in iOS this code works fine, whereas in android not.

This is my function in controller :

 $scope.getphoto = function()
        {

var options = {
               quality: 49,
               destinationType: Camera.DestinationType.FILE_URI,
               sourceType: Camera.PictureSourceType.CAMERA,
               allowEdit: false,
               encodingType: Camera.EncodingType.JPEG,
               targetWidth: 600,
               targetHeight: 800,
               popoverOptions: CameraPopoverOptions,
               saveToPhotoAlbum: true
           };
   
            $cordovaCamera.getPicture(options).then(function(imageData)
           {
               $scope.newpost.photo= imageData;
   
           }, function(err) {
               // error
           });
}

and this is part of the view

<ion-content ng-show="showcontent">
    <div class="list card">
      <div class="item item-image">
        <img id="imgvr" ng-src={{newpost.photo}} >
      </div>

      <label class="item item-input">
        <input class="input-ml" type="text" ng-model="newpost.desc" placeholder="comment here">
      </label>
</div>

the result is a white div…

thanks for help

Mine still comes as broken even when i use the cdvfile location :confused: i even tried whilelisting the cdvfile :frowning: No use, tried converting the file obtained from path to base 64 still no use -_-

Got the same issue too.

For example, my path is:

file:///Users/abc/Library/Developer/CoreSimulator/Devices/81B513B7-AE34-4911-A9C9-57E293957BEC/data/Containers/Data/Application/F3D451DB-8EB6-447A-852A-38BCA1B169A9/Library/NoCloud/logo_radni.png

I set this to my ng-src. But not shown in my page.

well, i used the cdv file to upload it to a server path with the user-id and then got the image back from the server to display :scream: . Literally, had to go the long way, since i couldn’t quite find the right solution at the right time. :frowning:

not working for me :frowning: Please help …

This is also not working for me. Did anyone resolve this? I keep getting unsupported URL.

Hi All,

I have done using below code and its working fine.

var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};

				$cordovaCamera.getPicture(options).then(function(imageData) {
					var image = document.getElementById('myImage');
					image.src = "data:image/jpeg;base64," + imageData;
					}, function(err) {
					// error
				});

//don’t forgot to add $cordovaCamera plugin from http://ngcordova.com/docs/plugins/camera/

I know this is an older post but as a heads up if you are using live reload you will get errors trying to use file:// or cdv:// paths. I rebuilt the app w/o live reload and everything worked without issue using either of those path types. Hope this helps somebody down the road!

2 Likes

@niczak thank you so much. This was driving me nuts. Important to note here that not only will this not work if live reload is running, but I had to remove any of the <allow-navigation> tags that live reload puts in your config.xml. I removed all <allow-navigation> tags from config.xml except for:

<allow-navigation href="*"/>
1 Like

Hello people,

I have recently faced same issue. Appears that cordova ios app is run on localhost:8080 internally, this is main reason why it doesn`t allow to load files from “file://” protocol.

easy fix - “var workingPath = window.Ionic.normalizeURL(givenPath)”;

Please read article from IONIC about that - https://ionicframework.com/docs/wkwebview/

1 Like

THANK YOU! With this the ‘DomSanitizer’ method mentioned in other threads is not needed. Tested working on IOS and Android.