最近拍摄的相机图像不会显示在离子页面上

Question

我正在尝试使用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

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

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

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

我已经研究过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 

也不起作用。

Answer 1

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

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

import { normalizeURL } from 'ionic-angular';

this.cameraImageURI = normalizeURL(this.cameraImageURI);

可以在https://ionicframework.com/docs/wkwebview/找到Dokumentation，请参阅主题＆＃34;重写文件：//

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

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

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