Why are the images on my Webflow page not showing up properly in the published site even though they are visible in design mode and the URLs are accessible?
TL;DR
- Re-publish your site to both subdomain and custom domain to ensure all assets are pushed live.
- Verify images are hosted via Webflow's asset manager or allowed external sources, with correct HTTPS and CORS settings.
- Check style visibility, animations, and lazy loading settings that could hide images on load.
- Inspect for custom code or JavaScript errors via browser console that may interfere with image rendering.
- Clear browser cache or test on other devices to rule out local caching issues.
If your images appear in Webflow Designer but not on the published site, and their direct URLs are accessible, the issue often relates to publishing errors, asset hosting, or custom code conflicts.
1. Check if Site Was Fully Published
- Go to Project Settings > Publishing and confirm your site has been published to both the Webflow subdomain and your custom domain (if used).
- Press Publish again to ensure recent assets and content are pushed live.
2. Confirm Image Hosting in Webflow
- Images must be uploaded directly into Webflow's asset manager or placed via CMS.
- If using external image sources (e.g., pasted URLs from elsewhere), make sure they are HTTPS and that CORS policies allow embedding.
3. Review Image Display Settings
- Double-check the Display, Opacity, or Visibility styles on your image elements.
- Look for any custom interactions or animations that might be hiding them on page load.
4. Disable Lazy Loading Temporarily
- Webflow uses lazy loading by default (loading="lazy"). This can fail for some viewers if scripts break.
- Replace image elements briefly with background images in a div to test whether it fixes the issue.
5. Inspect for Custom Code Errors
- Custom scripts in Page Settings > Custom Code or Site Settings > Custom Code may interrupt rendering.
- Use browser Developer Tools > Console to check for JavaScript errors that may prevent assets from loading.
6. Clear Your Browser Cache & Try Other Devices
- Clear the cache or try loading the site in an incognito window or different browser.
- Confirm whether issue is local (your device) or happening globally.
Summary
Images visible in Webflow but not on the published site are usually caused by incomplete publishing, custom code errors, or styling/display conflicts. Re-publish your site, verify your image settings, and inspect for broken JavaScript or lazy-loading issues to fix the problem.