Issue with image display in Chrome v1.6.0-rc.7

[DesarrolloAntonio]

Problem Description

I am experiencing an issue with the display of images in the Shiori app when using Google Chrome. I'm currently testing with version v1.6.0-rc.7 of Shiori.

Steps to Reproduce

1. Create several bookmarks in the app.
2. Delete all the created bookmarks.
3. Add several bookmarks again.
4. Open the app in an incognito tab on the left and a normal tab on the right (See capture)
5. Observe that on the right tab, only one image is displayed correctly.

Edit: I've also noticed that this issue occasionally occurs in incognito mode as well.

[Monirzadeh]

hi i test that it happen just when i use refresh in shiori and if i use ctrl + F5 it fix.
somehow refresh can't clean cache of browser but i don't find why it happen for some of bookmark yet
@fmartingr do you have any idea?

update: i test that in firefox.

update:
change this part

shiori/internal/view/assets/js/component/bookmark.js

Lines 96 to 100 in 595cb45

	thumbnailStyleURL() {
	return {
	backgroundImage: `url("${this.imageURL}")`,
	};
	},

to somthing like this solve problem in my tests

thumbnailStyleURL() {
    const cacheBuster = new Date().getTime(); // Unique timestamp
    const thumbnailWithCacheBuster = `${this.imageURL}?cache=${cacheBuster}`;
    return {
        backgroundImage: `url("${thumbnailWithCacheBuster}")`,
    };
},

what do you think? any better solution?
if it is fine to you send i will send a PR to fix that.

@DesarrolloAntonio can you test this on your system and report if problem will solve with this change for you too?

[DesarrolloAntonio]

hi i test that it happen just when i use refresh in shiori and if i use ctrl + F5 it fix. somehow refresh can't clean cache of browser but i don't find why it happen for some of bookmark yet @fmartingr do you have any idea?

update: i test that in firefox.

update: change this part

shiori/internal/view/assets/js/component/bookmark.js

Lines 96 to 100 in 595cb45

	thumbnailStyleURL() {
	return {
	backgroundImage: `url("${this.imageURL}")`,
	};
	},

to somthing like this solve problem in my tests

thumbnailStyleURL() {
    const cacheBuster = new Date().getTime(); // Unique timestamp
    const thumbnailWithCacheBuster = `${this.imageURL}?cache=${cacheBuster}`;
    return {
        backgroundImage: `url("${thumbnailWithCacheBuster}")`,
    };
},

what do you think? any better solution? if it is fine to you send i will send a PR to fix that.

@DesarrolloAntonio can you test this on your system and report if problem will solve with this change for you too?

In the Android app PageKeeper, I fixed it with a similar solution, but instead of a timestamp, I added the "modified" field.

// Append 'lastUpdated' query to image URL for cache busting. Forces retrieval of updated images.
val imageUrl = "${serverURL.removeTrailingSlash()}${bookmark.imageURL}?lastUpdated=${bookmark.modified}"