离子3图像本地应用程序夹未显示

Question

我已将一些图像下载到我的应用中。它们存储在应用程序目录中。这是URL之一：

file:///Users/w3/Library/Developer/CoreSimulator/Devices/CE0C21C3-2A3C-4C2F-AFF5-3A034A17F1EC/data/Containers/Data/Application/45AC6BC6-B8C2-433C-8E6C-3356EFAEB2B2/Library/NoCloud/WinGD%20Low-speed%20Engines%202017.jpg

如果我将此链接粘贴到任何浏览器中，则图像显示正常。将其放入我的视图中时，图像不会显示。将路径更改为错误的路径显示未找到的问题标志图标。因此该图像应由设备找到。

<img class="brochure" src='file:///Users/w3/Library/Developer/CoreSimulator/Devices/CE0C21C3-2A3C-4C2F-AFF5-3A034A17F1EC/data/Containers/Data/Application/304605E4-72D7-4C0F-9027-E46EC0C76C1E/Library/NoCloud/test.png'>

我已经尝试了[src]和我的config.xml

的各种添加

<allow-intent href="file:*" />
<access origin="file://*" />

和我的index.html文件。

  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

没有更改。我在物理设备上对iOS11仿真器进行测试。任何帮助，将不胜感激！谢谢！

更新：

我得到了像（使用Cordova-Plugin-File）这样的filepath：

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory+"test.png").then(result => {
   console.log("beforeresult:"+this.file.dataDirectory + "test.png")
   console.log("result"+result.nativeURL)
   return result.nativeURL;
}, error =>{
   return JSON.stringify(error);
});

Answer 1

如果您使用的是wkwebview，则可以按照以下步骤操作：

import { normalizeURL} from 'ionic-angular';

将图像路径存储在一些新变量中。

var imagePath = this.file.dataDirectory + "test.png";
this.tempImagePath = normalizeURL(imagePath);

然后在您的html文件中，只需将tempimagepath用作图像src。

此处描述了更改：https：//ionicframework.com/docs/wkwebview/

Answer 2

如果这些图像是静态文件，则需要将它们放入资产文件夹中，并使用相对路径引用它们。如果您需要应用程序来达到存储空间，则需要安装Cordova插件，如此处所述

Answer 3

在使用之前对URL进行消毒：

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
public displayImage: SafeUrl;
...
constructor( private sanitizer: DomSanitizer, .... ) {}
...
prepareImage(imageData)
{
    if(imageData!= null)
    {
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl(imageData);
    }
}

在模板中：

<img [src]="displayImage">

Answer 4

请这样替换您的路径。

file：///的问题只需替换为file：//

this.ImageData = imagePath.replace(/^file:///, '');