最近拍摄的相机图像不会显示在 Ionic 页面上答案

【问题标题】：Recently taken camera image won't display on Ionic page最近拍摄的相机图像不会显示在 Ionic 页面上
【发布时间】：2018-01-24 21:25:30
【问题描述】：

我正在尝试使用 Ionic 在页面上显示两个图像。我正在通过相机拍摄一张照片，我正在从网络上拉下另一张照片。我可以成功地将图像存储为FILE_URI，类似于以下内容：

相机：

file:///var/mobile/Containers/Data/Application/2A696490-1D2B-4A22-B058-8F814AF52D90/tmp/cdv_photo_001.jpg

网页：

file:///var/mobile/Containers/Data/Application/2A696490-1D2B-4A22-B058-8F814AF52D90/Documents/file.png

当我尝试查看文件时出现问题。当我尝试通过document["img1"].src = this.cameraImageURI; 在打字稿中设置img HTMLElement 的src 时，我的xcode 控制台上出现以下错误：

ERROR: Unable to send exception to server [object Object]

由于此错误，我的页面甚至从未加载。我相信我的问题可能是将整个字符串（如上所述）传递给img1src 属性。

我已经查看了 Ionic 的 FileOpener class，但我不确定这是否可行。

更新 1：我尝试切出文件：//，但不幸的是，这不起作用。另外，我尝试使用他们的功能normalizeURL，这也应该可以解决问题。这方面的文档位于here。但是，唉，它使字符串：

http://localhost:8080/var/mobile/Containers/Data/Application‌/17737D0A-F9C2-4DD9-‌8A9B-4DA6A094D100/tm‌p/cdv_photo_001.jpg

这也没用。

【问题讨论】：

你在使用 WkWebView 吗？如果是这样，您也许应该重写您的 URL，也就是删除“file://”。见ionicframework.com/docs/wkwebview主题“重写文件：//”
感谢您提供该网页。我尝试切掉file://，但不幸的是，这不起作用。另外，我尝试使用他们的函数normalizeURL，这也应该可以解决问题，但是它使字符串http://localhost:8080/var/mobile/Containers/Data/Application/17737D0A-F9C2-4DD9-8A9B-4DA6A094D100/tmp/cdv_photo_001.jpg 也不起作用。
Freak :( 可能有 HTMLElement 的东西。你可以试试没有它，比如<div *ngIf="cameraImageURI != null"><img [src]="cameraImageURI"></div> ps：我假设cameraImageURI 是类/视图/页面的公共变量
太棒了！ :) 那行得通！这到底是在做什么？
它只是在加载 url 时渲染图像，而不是之前。但我更猜测使用document 存在问题。无论如何，很高兴听到它成功了！！！你想发布答案并将问题标记为已解决还是我应该？

【解决方案1】：

正如上面 cmets 中所讨论的，首先我们发现第一个问题与 WkWebView 不支持包含 file:// 的 URI 相关。

为了移除它，Ionic 提供了一个方便的 util 方法，可以使用如下：

import { normalizeURL } from 'ionic-angular';

this.cameraImageURI = normalizeURL(this.cameraImageURI);

可以在https://ionicframework.com/docs/wkwebview/ 找到文档，请参阅主题“重写文件：//

其次，我认为 OP 在使用document 设置 URI 结果时可能存在问题。我建议从页面模板访问 URI 如下所示，幸运的是它成功了 ;)

<div *ngIf="cameraImageURI != null">
  <img [src]="cameraImageURI">
</div>

注意：这样做，只有在 URI 不为空时才会呈现图像。此外，cameraImageURI 必须是类/视图的公共变量

【讨论】：