イオン3画像ローカルアプリケーションフォルダが表示されない

Question

私のアプリにいくつかの画像をダウンロードしました。それらはアプリケーションディレクトリに格納されます。これはURLの1つです：

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'> 

私は私の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エミュレータ+でテストしています。 ご協力いただければ幸いです！ありがとうございました！

UPDATE：

私は（コルドバ・プラグイン・ファイルを含む）のようなファイルパスを取得しています：これらの画像は、静的なファイルがある場合は、あなたがそれらを配置する必要があり

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'; 

Storeであなたのイメージパスいくつかの新しい変数。

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

次に、あなたのHTMLファイルでは、単に画像srcとしてtempImagePathを使用してください。

変更は、ここで説明されていますhttps://ionicframework.com/docs/wkwebview/

Answer 2

アセットフォルダを作成し、相対パスで参照します。あなたのアプリがストレージに到達できるようにする必要がある場合は、cordova plugin as explained here

Answer 3

のようにパスを交換してください。

ファイルに問題：///だけのファイルで置き換えます：//

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