Question

我已将一些图片下载到我的应用中。它们存储在应用程序目录中。这是其中一个网址：

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）：

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

如果这些图像是静态文件，则需要将它们放在assets文件夹中并使用相对路径引用它们。如果您需要应用才能访问存储空间，则需要安装cordova plugin as explained here

Answer 2

如果您使用的是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 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:\/\//, '');

Ionic 3图像本地应用程序文件夹未显示

4 个答案: