相机的 FILE_URI 路径不适用于 IONIC 4答案

【问题标题】：FILE_URI path for Camera not working on IONIC 4相机的 FILE_URI 路径不适用于 IONIC 4
【发布时间】：2019-02-07 23:59:01
【问题描述】：

当使用相机以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... 路径中，而不是基于 localhost 的正确路径。

【问题讨论】：

标签： ionic-framework ionic4

【解决方案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 了解更多信息。

【讨论】：

为了在模板中显示新的 convertFileSrc url，我仍然不得不使用DomSanitizer
太棒了！这也是你救了我的工作，我搜索了两天 :( 不明白为什么 Ionic 团队没有就这些重大变化做出明确的文档。
@excbot - 我想他们没有“制作明确的文档”的原因是因为他们必须优先考虑他们在这个开源项目上免费提供给我们所有人的大量工作。很抱歉，我觉得自己很挑剔，我只是认为尊重他人无偿付出的时间和努力很重要。
@dr_ermio。它确实有效。一个小问题是，除非我触摸表单中的某个位置，否则 UI 上的图像显示不起作用。任何想法为什么它不立即更新？

【解决方案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);

【讨论】：

【解决方案3】：

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

"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build

并从 @Alok Singh 那里寻找答案，这就是我在 ionic4 上工作的方式，甚至可以与 livereload 一起工作

【讨论】：

【解决方案4】：

2021 年 12 月更新：

你必须安装新的Ionic Webview

运行：

ionic cordova 插件添加 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="">

【讨论】：