FILE_URI Camera 的路径在 IONIC 4 上不工作

Question

使用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 在 file:///storage... 路径中，而不是基于本地主机的正确路径。

Answer 1

在以前的 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。

Answer 2

就我而言，以下代码适用于我

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);

Answer 3

如果有人来这里寻找有关 ionic4 的答案，请查看此内容

然后从@Alok Singh 那里寻找答案，这就是我在 ionic4 上工作甚至在 livereload 上工作的方式

Answer 4

2021 年 12 月更新：

您必须安装新的 Ionic Webview

运行:

ionic cordova plugin add cordova-plugin-ionic-webview

npm install @awesome-cordova-plugins/ionic-webview

将其导入 app.module 以及您要使用它的页面：

import { WebView } from '@awesome-cordova-plugins/ionic-webview/ngx'; 
image = "";
constructor(private webview: WebView){}

那么这将起作用：

this.camera.getPicture(options).then((imageData) => {
 this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
 // Handle error
});

并在HTML页面显示：

    <img [src]="image" alt="">

FILE_URI Camera 的路径在 IONIC 4 上不工作

FILE_URI path for Camera not working on IONIC 4

ionic-framework

ionic4