web-dev-qa-db-ja.com

カメラのFILE_URIパスが機能しないIONIC 4

Camearaを使用してdestinationType: this.camera.DestinationType.FILE_URIで写真を撮影する場合、結果のURLは画像を表示するために機能しません。たとえば、次のような写真を撮ろうとすると：

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

<img [src]="imagePath" >として表示しようとすると、エラーが発生します（ファイルが見つかりません）。

ここでの問題は、URLがlocalhostに基づく正しいパスではなくfile:///storage...パスにあることです。

ionic-frameworkionic4
8
dr_ermio

Ionicの以前のバージョンでは、これはnormalizeURLを使用して解決されました。これはIonic 4では動作しません（または少なくとも動作させることができませんでした）。

この問題を解決するには、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);
    });

これで、画像のURLは適切なhttp://localhost:8080/_file_/storage...形式であり、正しくロードされます。

詳細については、 WKWebView-Ionic Docs を参照してください。

20
dr_ermio

私の場合、次のコードは私と一緒に動作します

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