[SOLVED] Images from android storage doesn't show on image tag

Ionic Framework ionic-v3
1

I making a sell&buy app with Ionic 2. On new sell I need to show images to add fro sale.
I’m using PhotoLibrary Cordova Plugin to retrive images from android storage.

this.photoLibrary.requestAuthorization().then(() => {
    this.photoLibrary.getLibrary().subscribe({
        next: library => {
            this.photos = library;
        },
        error: err => { },
        complete: () => { console.log("could not get photos"); }
    });
}).catch(err => console.log("permissions weren't granted"));

Code from Photo Library

I also added:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> to my index.html file.
<allow-navigation href="*" /> and <allow-navigation href="file://*/*" /> to my config.xml file.
From No local image showing in view on device

I show photos as follow:

<div class='photos' *ngIf='photos'>
    <div class='photo' *ngFor='let photo of photos;'>
        <img src="file://{{photo.photoURL}}" alt="{{photo.fileName}}">
    </div>
</div>

And on my device I get:

image
imagesnoload.png720×427 85.4 KB

First image without meta http-equiv and allow-navigation on index.html and config.xml respectively.
Second image is an ion-list showing ID’s and names of each image just to ensure PhotoLibrary was working as expected.
Third image after add meta http-equiv and allow-navigation

I also did read that I need image URI to base64 string on How to load image from android local storage
Is it necessary? Am I doing something wrong? Did I forgot something?

2

URIs are correct? Inspect with Great. https://ionic.zone/debug/remote-debug-your-app#android

3

Oh, tank you so much for this tool. I did know it!
URL is wrong! I had this:
<img src="file://{{photo.photoURL}}" alt="{{photo.fileName}}">
But actually might be:
<img src="{{photo.photoURL}}" alt="{{photo.fileName}}">
or
<img [src]="photo.photoURL" alt="{{photo.fileName}}">
for short and clear.

Now the proble is that each picture adds unsafe just behind the URI, like below:
image
Is this something about meta http-equiv..., I can see usafe-inline but I don’t know what it means.

[EDIT]
O god, was my wrong. It is too embarrassing!
PhotoLibrary Cordova Plugin Docs says actually what I need to do if I use it on Angular!
I didn’t read docs as I should have. I’m apologize.

1 Like
4

Hi , How did you put images into file directory . i have same problem but im trying to do with FTP plugin , by download image in to file storage (external storagedirectory ) in phone and then receive them but , problem is there i cant find the image real location

Thanks

1 Like
5

Hi, is it working in ionic 3 as well???