Ionic 3 - Dapatkan gambar dari file.dataDirectory mengembalikan 404 tidak ditemukan (setelah normalizeURL)

Saya mencoba menampilkan gambar dalam tampilan ionik saya yang disimpan di dataDirectory aplikasi. Tetapi ketika saya mengatur gambar di tag src, ia mengembalikan 404.

Pertama saya menyimpan gambar yang dikembalikan dari api ke dataDirectory dan menormalkan URL:

this.file.writeFile(this.file.dataDirectory, filename, blob, { replace: true })
.then(function(fileEntry) {
    store.photoData = normalizeURL(fileEntry.nativeURL);
    resolve();
});

Url gambar yang dinormalisasi terlihat seperti ini:

http://localhost:8080/var/mobile/Containers/Data/Application/1758E3DC-66D3-4481-8835-79C7841A540A/Library/NoCloud/1510162340797.jpg

Lalu saya menggunakannya dalam pandangan saya:

<img *ngIf="store.photoData" [src]="store.photoData" />

Adakah ide bagaimana cara menggunakan gambar sumber daya lokal dalam tag src? Saya tidak ingin mengubahnya kembali ke base64! Saat saya menggunakan nativeURL dengan file ionik getFile atau readAsBinaryString, ia mengembalikan file, jadi benar-benar ada!

Itu memang menambahkan <allow-navigation href="http://localhost:8080/*" /> ke config.xml saya, tidak tahu apakah itu perlu.


cordova ionic-framework ionic3
person Rick de Klerck    schedule 15.12.2017    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Ada yang salah dengan gumpalan saya. Ini berfungsi sekarang.

var blob: any = this.b64toBlob(contents, 'image/jpg', 512);

b64toBlob(b64Data, contentType, sliceSize) {
            contentType = contentType || '';
            sliceSize = sliceSize || 512;

            var byteCharacters = atob(b64Data);
            var byteArrays = [];

            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
            }

          var blob = new Blob(byteArrays, {type: contentType});
          return blob;
}
person Rick de Klerck    schedule 18.12.2017