Some images on a website I am designing with LocalWP are not presenting.
All the images are webp.
LocalWP version 8.1.0+6514
macOS Ventura 13.6.1 (22G313)
Is this just when viewing the site’s front end or using Live LInk?
Do you see any mixed content errors in the console?
The images are missing when the website is viewed with the Live Link.
How do I see mixed content errors in the console?
Here’s what the missing image looks like in the back-end (Dashboard / Media).
It depends on what browser you’re using. If you’re using Chrome for example you can go to More Tools>Developer Tools (or use fn+f12 on mac).
Live Links don’t match your Local Site URL (ie: mysite.local), so Local attempts to rewrite these on the fly. Live Links is broadly compatible with many themes, plugins, and custom code snippets. However, some images, front-end assets, or other HTML elements may be missing from your site when viewing it over Live Links.
As a first step you can try running a search and replace command to help clean up any mixed content type errors. To do this you can simply click on Open Site Shell in your Local app under your site name. The command would look something like this:
wp search-replace 'SITEURL' 'LOCALURL' --skip-columns=guid
As a tip you would:
-
Replace SITEURL with your production URL like https://localwp.com
-
Replace LOCALURL is your Local Site URL like https://mysite.local
You’ll also want to make sure you Trust Local’s SSL certificate, to help avoid insecure content as well.
If you’re still noticing issues, check to see if you have plugins or themes that retain caching or have a “Regenerate CSS” option. These may need to be refreshed in order for changes to be displayed.
There may be other plugins getting in the way as well if they are trying to force SSL/HTTPS.
You might try viewing it in an incognito window, a different browser, or over LTE Data instead of WiFi to see if caching is getting in the way as well.
As another workaround, if you’re still having trouble, you could try pushing the site up to a Demo to see how it looks there. Flywheel offers free 14 day Demos that you could test out: Demo Site
I typically use Chrome which is where I am NOT seeing some images.
I just opened Safari and the missing images on Chrome are presenting fine on Safari.
It sounds like Chrome might just be cached then. So you could try clearing your Chrome’s cache or using an incognito window!
I’m all set for now. At least I know the “missing” images in Chrome are showing up in Safari.
Thanks for your patience and competent help.
2 Likes
