bug(5.0.3): Images not showing

[eduardoRoth]

Images are downloaded but not updated on screen. Images seem to be cached but not shown.
I'll update as soon as I have more detail.

[eduardoRoth]

Sometimes images are shown, sometimes they don't. I have a share button that gets the image from the cache so I know images are downloaded and saved, but for some reason the component never gets the "finished" status and keeps showing the spinner.

[eduardoRoth]

1. Image download start as usual.
2. Image's XHR calls finish with status code 200 (only 5)
3. I have two GIFs that keep loading even after the XHR call is finished
4. Component is not updated, keeps showing spinner

[eduardoRoth]

More details about this error:

1. Open app
2. App inits Image Loader configuration

     this._image.setMaximumCacheSize(268435456);
     this._image.enableDebugMode();
     this._image.setCacheDirectoryName('custom-name');
     this._image.setFileNameCachedWithExtension(true);
   

3. App sets root to page
4. Page load calls API
5. API returns five items
6. Image Loader starts fetching image
7. Spinner stuck loading
8. Close app after a while
9. Open app again, ImageLoader fetch from cache but image is not available (although no error)
10. Move to another page
11. New page call API and gets 5 different results
12. ImageLoader load everything fine.

[eduardoRoth]

On first run, something is happening in processQueue function that it never resolves or rejects in this part:

_this.file.writeFile(localDir, fileName, data)
                    .then(function (file) {
                        if (_this.shouldIndex) {
                            _this.addFileToIndex(file).then(function () {
                                _this.getCachedImagePath(currentItem.imageUrl).then(function (localUrl) {
                                    currentItem.resolve(localUrl);
                                    resolve();
                                    done();
                                    _this.maintainCacheSize();
                                }).catch(err => {
                                    console.error('currentItem', err);
                                    currentItem.reject();
                                });
                            });
                        }
                    }).catch(function (e) {
                        //Could not write image
                        console.error(e);
                        reject();
                        error(e);
                    });

[gmosornoza]

Hi, same issue over here. Any news?

[gmosornoza]

What i'm seeing is that the files are created with 0 filesize.

[eduardoRoth]

@gmosornoza but it only happens the first time, if you close your app (fully close it) and then navigate to another page that has img-loader components, they'll load just fine.

[gmosornoza]

@eduardoRoth Not for me. In fact, first time only shows the fallback Image. If i close and reopen the app, then it shows the image as broken image.

Checking the cache directory in the device i noticed the zero filesize.

[eduardoRoth]

First time opening the app:

Second time opening the app - confirms the zero byte files:

[eduardoRoth]

[eduardoRoth]

This happens with @ionic-native 4.7.0 or 4.9.0

[eduardoRoth]

@felixbroehl could you take a look at this?

[felixbroehl]

Did this worked before my changes were merged? Which platforms did you tested? I'm unable to reproduce such problems with my devices.

[gmosornoza]

@felixbroehl I'm using the plugin as is. Android Oreo device,

[gmosornoza]

window.resolveLocalFileSystemURL is rejecting with errorCode 1, in @ionic-native/file.

I trace until this:

File.prototype.resolveLocalFilesystemUrl = function (fileUrl) {
var _this = this;
return new Promise(function (resolve, reject) {
try {
window.resolveLocalFileSystemURL(fileUrl, function (entry) {
resolve(entry);
}, function (err) {
_this.fillErrorMessage(err);
reject(err);
});
}
catch (xc) {
_this.fillErrorMessage(xc);
reject(xc);
}
});
};