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

나는 나의 config.xml에

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

내 index.html 파일에 [SRC] 다양한 추가로 그것을 시도했다.

<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

새로운 변수.

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

그런 다음 html 파일에서 tempImagePath를 이미지 src로 사용하십시오.

변화는 여기에 설명되어 있습니다 : https://ionicframework.com/docs/wkwebview/

Answer 2

assets 폴더에 저장하고 상대 경로로 참조하십시오. 저장 용량에 도달 할 수있는 앱이 필요한 경우 cordova plugin as explained here

Answer 3

경로를 다음과 같이 바꾸십시오.

파일의 문제 : /// 단지 파일로 대체 :

import { normalizeURL} from 'ionic-angular'; 

스토어 이미지 경로에 : 당신이 wkwebview를 사용하는 경우, 다음 단계를 수행 할 수 //

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