Images are not displayed on Ionic.

[sfaizanh]

Hi, Images are not displayed on ionic 3

this.photoLibrary.getLibrary(options).subscribe({
    next: (chunk) => {
        this.library = this.library.concat(chunk);
        this.cd.detectChanges();
    },
    error: (err: string) => {
        if (err.startsWith('Permission')) {
            this.noAccess = true;
        } else { // Real error
            let toast = this.toastCtrl.create({
                message: `getLibrary error: ${err}`,
                duration: 5000,
            });
            toast.present();
        }
    },
    complete: () => {
        console.log('completed');
    }
});

even this.photoLibrary.getThumbnail(id).then(console.log); returns {} empty object

<meta http-equiv="Content-Security-Policy" content="img-src 'self' * blob: data: cdvphotolibrary:;">

Using cordova-plugin-ionic-webview 1.1.11 "Ionic's WKWebView Engine"

SafeImage Pipe is working

[jaybloke]

Also getting the same problem - I believe that WKWebView does not support custom schemes like 'cdvphotolibrary' which is a deal-breaker for me.

[sfaizanh]

@jaybloke you're right tried several times but failed with cdvphotolibrary://

[abcdurga]

This works like a charm:-

If you are using wkwebview(which is now default for new apps) then follow below steps,

import { normalizeURL} from ‘ionic-angular’;

store your image path in some new variable.
var imagePath = this.file.dataDirectory + “test.png”;
this.tempImagePath = normalizeURL(imagePath);

then in your html file,
use tempImagePath as image src.

Source: https://forum.ionicframework.com/t/downloaded-image-is-not-displayed-ionic-3-8/110912/2

To see if WKWebview is installed correctly, try adding this to your main app component:

if (window.indexedDB) {
  console.log('I have WKWebview installed!');
} else {
  console.log('I have UIWebView installed!');
}

[jaybloke]

@abcdurga solution only works for paths that begin with 'file://' - if you check the documentation here https://ionicframework.com/docs/wkwebview/ you will see:

Note: Core cordova plugins also allow you to reference a file via the cdvfile:// protocol. Unfortunately, we cannot rewrite this path as it is something that gets resolved in native code. We suggest that when ever you reference a file, use the full path for rewrites, not cdvfile://.

Same rule applies to anything prefixed with cdvphotolibrary://

[kishanbharda]

Any body found the solution ? I tried all of solutions like return this.sanitizer.bypassSecurityTrustUrl(url); , tried with 'file://' path, tried without 'file://' path but none of them displaying image in img tag. Please give me solution...!