Lazyload is loading incorrect images

Themes
1

I am creating a custom theme using Wave as a base, and I noticed a serious issue with the lazyloading.

When I look at the post on the site, the images are in a completely different order than in the post editor, like each image block is loading a different image from the post.

image
image1920×723 90.6 KB

as far as I can tell, the order is completely random.

I am adding the images by copy / pasting from google images, and if I try and delete the images in the editor and past them again, they will be in a different order in the post.

Has anyone else experienced anything like this?

EDIT: I will also add this only seems to have started happening after updating to the latest ghost version. I checked some posts that were created / edited before the update, and they are fine.

EDIT2: I can also confirm this is happening on the standard Wave theme as well.

2

This seems strange. Few questions:

  • Has it happened in multiple posts?
  • Do your images have the same filenames?
  • Are you able to share your URL?
3

So far, it has happened on every post with multiple images.

I just did an interesting test. I have a webserver running the previous version of ghost, and then my localhost version that is updated to 5.3.

I tried creating a blog post both on the server running the previous version (5.2), and on localhost (5.3) using the same images in the same order.

On the server (5.2) the images showed in the correct order.
On localhost (5.3), the order was scrambled.

I also tried inspecting the image to try loading the link directly.

image
image1916×1038 175 KB

if I click to load the “src” link in a new tab, it loads the image that should be there. however, the “srcset” images are the one that is visible. (the purple flower was the one that was supposed to be first)

I know that ghost will autogenerate smaller size versions of images, but it seems like it’s generating the small size based on an incorrect image.

It just occurred to me, but I before this started, I t went through the ghost content/images folder and deleted a bunch of duplicates, since I accidentally imported a backup twice. Is it possible that is somehow throwing it off?

If you want, I would be willing to walk through this on a discord call or something, if you want to talk about it in more detail.

4

I was able to fix the problem by disabling image lazy load and image resizing, which I will likely be keeping anyway, since I have limited storage space.

5

Glad you got it working! I haven’t seen any other reports of this error. I’m not sure how image resizing/lazy loading would cause this problem. The only possibility I can imagine is if image filenames were somehow changed in the process of uploading/modifying your images.

Anyway, if you continue to run into this problem, please make another post.