CODEWITHSUNDEEP
cordovaionic-frameworkionic3
Inovaro_NL
Inovaro_NL

Reputation: 33

Ionic 3 - Get image from file.dataDirectory returns 404 not found (after normalizeURL)

I’m trying to show an image in my ionic view which is stored in the dataDirectory of the app. But when I set the image in the src tag, it returns a 404.

First I saved the image returned from an api into the dataDirectory and normalize the URL:

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

The normalized url of the image looks like this:

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

Then I use it in my view:

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

Any ideas how to use a local resource image in a src tag? I don’t want to convert it back to base64! When I use the nativeURL with ionic file getFile or readAsBinaryString it does return a file, so it's really there!

It did add <allow-navigation href="http://localhost:8080/*" /> to my config.xml, didn't know if that was necessary.

Upvotes: 0

Views: 987

Answers (1)

Inovaro_NL
Inovaro_NL

Reputation: 33

Something was wrong with my blob. It's working now.

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

Upvotes: 0

Related Questions