Broken Images Sometimes Main Product Image

Hi @landed

This could be due to several reasons. One possibility is that the image size is not being correctly generated when the image is uploaded.

To further investigate this issue, I would suggest checking your WordPress and server error logs for any related errors. Also, try regenerating your thumbnails using a plugin like Regenerate Thumbnails or WooCommerce’s built-in thumbnail generator at WooCommerce > Status > Tools > Regenerate shop thumbnails.

Also, make sure to flush permalink settings by going to General > Permalinks > Click on Saving without changing anything.

If the issue still persists, please provide us with the system status report, which can be found under WooCommerce > Status.

Let us know how that goes. Looking forward to helping you.

Thanks for reaching out. I have here a standard set of uploaded images and as you can see they upload with the correct postfixes.

So something sometimes causes the postfix to apply to the postfix and you get the duplication image url e.g.
600×600 applied twice as above causing the 404. These appear in a src set in the code and cause an issue. I don’t see the issue so badly in mobile. Another confusing trait making debug harder.

The images are there so no issues with the generation side. So what is causing these postfixes to get applied twice.

In pseudo code I would do the following:

var prefixs = [xxx,’600×600,’yyy]
var orignal path = original image path
create source set with full prefixes, make sure to apply the prefixes only to original path.

So either the original path is mistaken or we are not doing enough checks when creating the thumbnail paths.

• This reply was modified 1 year ago by landed.

Hello @landed,

I’m unable to replicate this issue on my test site. Could you confirm whether you’ve tried flushing your site’s permalinks, as previously mentioned?

Additionally, have you attempted renaming these images either from your media library or via FTP? Has this made any difference?

It would be helpful if you could provide your site’s system status. You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support” (after you scroll down a bit)”. Once done, please paste it here in your reply or via a text-sharing service like https://gist.github.com/.

Look forward to hearing back from you.

Thanks for coming in, I need more heads on this one.
I tried flushing the permalinks and it made no difference.
Yes of course if I rename the image to match the url request it will be found- but why should I need to do this for each odd product?

The source is the issue not the images. I don’t have a status menu item and looked for it- sorry.

Hi there @landed ??

This image exists
https://shopstylereview.com/wp-content/uploads/2020/05/Stylish-Aviator-Style-Sunglasses-Performance-Aluminum-Frames-Polarized-UV-Protection-Sunglasses-Sunglasses-Accessories-M-6-600×600.jpeg

This one is the one in the source code – so it appears broken.

https://shopstylereview.com/wp-content/uploads/2020/05/Stylish-Aviator-Style-Sunglasses-Performance-Aluminum-Frames-Polarized-UV-Protection-Sunglasses-Sunglasses-Accessories-M-6-600×600-600×600.jpeg

I tried with browsing the links above and 404 error messages appeared in both cases.

Sample product URL -https://shopstylereview.com/product/aviators-polarized-sunglasses/

While browsing this product’s page, it appears the product image breaks, and the rest appear as expected. Screencast linked here, for reference.

Just to clarify, did you try with selecting a different image as product image and see if the issue persists, or otherwise?

By the way, did you already have a chance to test with the temporarily switching to the Storefront theme (linked here), perhaps?

Furthermore, does this happen with a newly created product, without a product image selected, where the placeholder image would be utilized.

I don’t have a status menu item and looked for it- sorry

Here’s further details on where to find it.

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

The issue is from whatever script is appending the 600×600 to the url, hence it breaks. As image600×600600×600600×600600×600.jpg doesn’t exist. I exaggerated to show the issue.

I have read about some kind of script which runs in the background on product images to make sure they are uniform in size. I believe whatever this is is partly to blame. But now I cannot find this online. Am I going mad was it a dream.

Tried storefront and different images. I have given up for the moment. But appreciate that you all had ideas. For that thank you.

• This reply was modified 9 months, 3 weeks ago by landed.

Hey, @landed!

I understand this is a frustrating situation. If you want to keep investigating to figure out what is going on, we are here and happy to continue assisting you with that, just say the word.

Have a wonderful day!

View post on imgur.com

I found where the 600 is specified and it shows that woocommerce is doing this image optimisation as part of some offline script. So it looks like the core is the issue. For some reason on mine the urls don’t get properly checked and so this happens:

View post on imgur.com

View post on imgur.com

What the above image shows is that the https://shopstylereview.com/wp-content/uploads/2021/10/Magnetic-Love-Heart-Bracelet-Set-Jewellery-Womenswear-f02846ee759da375bf7e2a-1black-and-blackblack-and-blueblack-and-pin-5-1024×1024-600×600.jpg doesn’t load.

The reason is it’s not the original image and this image doesn’t exist.

So the woocommerce logic creating this zoom box main product image is somehow wrong. At least on my site.

You can see in this URL – https://shopstylereview.com/product/magnetic-love-heart-bracelet-set/

?? hey @landed

Thank you for reaching back, with further details on this.

What the above image shows is that the https://shopstylereview.com/wp-content/uploads/2021/10/Magnetic-Love-Heart-Bracelet-Set-Jewellery-Womenswear-f02846ee759da375bf7e2a-1black-and-blackblack-and-blueblack-and-pin-5-1024×1024-600×600.jpg doesn’t load.

Not only that, but it also appears that the f02846ee759da375bf7e2a part is enabled by functionality outside WooCommerce core.

Went ahead with testing on a local site, for reproducing this, to no avail, I’m afraid.

Below, a screenshot of the images created, with the Storefront theme activated.

The URL was as expected as well:

As a next step, could you please try with reproducing on a fresh installation, with WooCommerce version 8.5.2, and see how it goes?

We look forward to your response. In the meantime, please let us know if you have any further questions or concerns.

• This reply was modified 9 months, 1 week ago by anastas10s. Reason: typo

Thank you for coming back.

You said “Not only that, but it also appears that the?f02846ee759da375bf7e2a?part is enabled by functionality outside WooCommerce core.”

No this is just part of the image filename that was originally imported. It is quite random I admit (and a red herring).

https://shopstylereview.com/wp-content/uploads/2021/10/Magnetic-Love-Heart-Bracelet-Set-Jewellery-Womenswear-f02846ee759da375bf7e2a-1black-and-blackblack-and-blueblack-and-pin-5.jpg

That one loads- it is the original image. If the source code tried to render this image then there is no broken image.

Whatever is causing this -1024×1024-600×600 to be added, renaming at later time is what causes the issue. The original image is there. I just can’t find what is breaking the filename. It is probably my Themify theme but they seem to not understand either.

I have seen some post somewhere that woo has an offline feature for optimising product images and I wonder if that mechanism is it. I can no longer find anything online again about this ‘feature’ from hell.

• This reply was modified 9 months, 1 week ago by landed.

Hey there, @landed!

Thank you for clarifying.

Have you tried testing it on a fresh installation, with?WooCommerce version 8.5.2 as my colleague suggested?

You also mentioned thinking this might be the Themify theme. So a fresh installation on a staging site that does not have Themify installed is a good way to test and see if the issue persists.

You can ask your host if they offer this service, or you can use WP Staging for quickly spinning up a new test site.

You can find more about this in this guide.

Looking forward to your reply.

Have a wonderful day!

That is likely not going to have the issue and only tell me like a fitness tracker that which I already know!

I need some insight into the development of the main product image from woo team. That’s not likely to happen I get that. But there may have been others reporting the same so I do feel my post is of value.

Thank you for your contribution.

?? hey @landed

I went ahead with testing some more, with WooCommerce version 8.5.2, despite version 8.6.1 already available, and the Storefront theme active.

Upon uploading the image shared above, here’s what’s being generated on my end. Everything is as expected.

I hope this is helpful! Please let us know if you have any further questions or concerns.
We will be happy to help you further.

• This reply was modified 9 months, 1 week ago by anastas10s. Reason: typos

Thank you everyone. Coincidentally with the last post I was going over theme related settings again as I now found a basic blog post image was getting an incorrect src set. This clue helped massively and the others posting replies here. So thank you. It seems this is a THEMIFY issue in a setting ‘feature from hell’ they call https://themify.me/docs/image-script

So I think this can be closed now. Phew. Again thanks all for the support.

Hi @landed,

I’m glad you were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

Should you have further inquiries, kindly create a new topic here.

Thanks!