web-dev-qa-db-fra.com

Chemin FILE_URI pour la caméra qui ne fonctionne pas IONIC 4

Lorsque vous utilisez le Cameara pour prendre une photo avec destinationType: this.camera.DestinationType.FILE_URI, l'URL résultante ne fonctionnera pas pour afficher l'image. Par exemple, lorsque vous essayez de prendre une photo comme celle-ci:

this.camera.getPicture(options).then((url) => {
        // Load Image
        this.imagePath = url;
    }, (err) => {
        console.log(err);
    });

Tentative de l'afficher en tant que <img [src]="imagePath" > entraînera une erreur (fichier introuvable).

Le problème ici est que l'URL est dans le file:///storage... chemin au lieu du chemin correct basé sur localhost.

ionic-frameworkionic4
8
dr_ermio

Dans les versions précédentes d'Ionic, cela serait résolu en utilisant normalizeURL. Cela ne fonctionnera pas sur Ionic 4 (ou du moins je n'ai pas pu le faire fonctionner).

Pour résoudre ce problème, vous devrez utiliser convertFileSrc():

import {WebView} from '@ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
        // Load Image
        this.imagePath = this.webview.convertFileSrc(url);
    }, (err) => {
        console.log(err);
    });

Maintenant, l'URL de l'image sera dans le http://localhost:8080/_file_/storage... format et se chargera correctement.

Voir WKWebView - Ionic Docs pour plus d'informations.

20
dr_ermio

Dans mon cas, le code suivant fonctionne avec moi

const downloadFileURL = 'file:///...';

// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);
0
ahmednabil88