It appears to be a caching problem. Please verify after clearing the browser’s cache with a hard refresh using this key combination of CTRL+F5.
If it fails to resolve the problem. You may provide your website’s URL for me to check.
Wow what a difficult one!
I generally always do hard cache refreshes (ctrl+F5) so knew that was not the issue but it was cache related.
I suspected VScode since the images were showing as broken in the VSCode editor (as in the screenshots i provided).
For anyone experienceing this when using VScode:
1* Don’t move images from their locations on your PC directly into your VSCode project!
2* Move them instead into the VSCode project folder which contains all your VScode projects
by default VSCode installs it in your ‘user’ folder (in Windows); not sure about Mac (sorry)
- Remove the broken images from your VSCode project they are permamantly corrupted! the cut-off parts display completely corrupted data like a fractal image.
- Replace those images by adding good versions to the VSCode project folder as in point 2* above.
- From within your VSCode project upload those images via ftp to your server (replacing corrupted ones).
- Ok, this next bit fooled me for ages! After (hard)clearing my cache again and purging all cahes using my Caching plugin (Litespeed)
expecting the new images to display – oops no! This may or may not be an issue for you but i had to take one more step. - All affected image need to have a version query-string update, i.e. ‘myimage.png?ver=1.0’ your images may or may not have this query-string explicitly added. If not there its assumed to be version 1.
You, however need to add it if not there already and then bump up the version number by one, i.e. ‘myimage.png?ver=2.0’. - If, like me, one of the broken images is your screenshot.png of your theme then you can only affect the version number by bumping up the version from
the themes ‘style.css’ comment meta data – i.e. ‘version : 1.0’ – bump the version up there. However note if its not your own theme then it may mess up future updates of the theme.
So try using a WP Plugin like ‘Easy Replace Image’ which gets around the age-old WP issue of not being able to overwrite an unwanted image with a new image of the same name.
Hope this helps someone else. The issue is definately VSCode image paths on your local machine. Never happens when using NP++ as an editor!
Thanks