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

我已将一些图像下载到我的应用程序中。它们存储在应用程序目录中。这是其中一个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'>

---

如果这些图像是静态文件，则需要将它们放在assets文件夹中，并使用相对路径引用它们。如果你需要你的应用程序能够访问存储，你需要安装一个

如果这些图像是静态文件，那么你需要将它们放在资产文件夹中，并用相对路径引用它们。如果你需要你的应用能够访问存储，你需要安装一个

请像这样替换你的路径

文件的问题：///只需替换为文件：//

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

---

请像这样替换您的路径

文件的问题：///只需替换为文件：//

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

---

如果您使用的是wkwebview，则可以执行以下步骤：

import { normalizeURL} from 'ionic-angular';

将图像路径存储在某个新变量中

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

然后在html文件中，只需使用tempImagePath作为image src

---

此处描述了更改：

如果您使用的是wkwebview，则可以执行以下步骤：

import { normalizeURL} from 'ionic-angular';

将图像路径存储在某个新变量中

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

然后在html文件中，只需使用tempImagePath作为image src

---

此处描述了更改：

在使用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">

---

在使用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">

我需要访问存储在设备上的文件。我已经安装了cordova插件文件。这个插件给了我应用程序folderI中的图像的URL，我需要访问存储在设备上的文件。我已经安装了cordova插件文件。这个插件给了我应用程序文件夹中图像的URL，没有任何更改。当我尝试将URL粘贴到浏览器中时，用2而不是3斜杠，文件找不到。使用文件：///找到它。奇怪，没什么变化。当我尝试将URL粘贴到浏览器中时，用2而不是3斜杠，文件找不到。使用文件：///找到它。奇怪。奇怪的是，在使用CordovaFile保存/复制照片时，我需要保留目录路径中的文件：/，但在视图中显示图像需要从路径中删除文件：/。不太清楚，我花了一段时间才弄明白。奇怪的是，当使用CordovaFile保存/复制照片时，我需要保留目录路径中的file://部分，但在视图中显示图像需要从路径中删除file://文件。不太清楚，我花了一段时间才弄清楚。