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 the full site and ensure images are uploaded via the Asset Manager.
- Use HTTPS image URLs to avoid browser blocking due to mixed content.
- Verify CMS images are published and present in Collection Items.
- Rename files with standard formats and remove special characters.
- Clear browser cache or test in incognito to rule out caching issues.
- Check Style Panel for display, opacity, z-index, and visibility settings.
Images not showing on your published Webflow site despite appearing in design mode and having accessible URLs usually indicate a project configuration issue, browser-related problem, or incorrect image linking.
1. Check Image Hosting and Publication
- Re-publish the entire site from the Webflow Designer, not just a single page. Sometimes assets are not fully uploaded until a full publish.
- If you are using Webflow’s Asset Manager, make sure the images were properly uploaded. Drag-and-dropped images may appear locally but not be included in the publish.
2. Confirm SSL and Mixed Content Issues
- If your Webflow project is published on HTTPS, any images linked via HTTP (instead of HTTPS) will be blocked by modern browsers for security reasons.
- Use HTTPS URLs for all assets. Check the image
srcfields in the published site’s code (right-click → Inspect → Elements tab) for insecure links.
3. Check CMS and Collection Images
- If images are pulled from a CMS Collection, ensure the Collection Item is published and the image field is not empty.
- Go to Editor → Collections, open sample entries, and confirm images exist and are saved.
4. Optimize File Names and Formats
- Avoid special characters or spaces in image filenames. Stick to alphanumeric names with dashes or underscores (e.g.,
hero-image_01.jpg). - Ensure the images are in a supported format (JPG, PNG, WebP, or SVG). File formats like HEIC or TIFF won’t display properly.
5. Cross-Origin or Browser Caching Issues
- Try loading the published site in a private/incognito window or clear the browser cache.
- Rarely, if using custom code to load external assets (e.g., CDNs), the server may block hotlinking or cross-origin requests.
6. Check Display and Visibility Settings
- In Webflow Designer, go to the Style Panel and check:
- Display setting (ensure it’s not set to
display: none) - Opacity (should not be 0%)
- Z-index (not hidden behind other elements)
- Verify that the image isn’t part of a hidden interaction or conditional visibility rule.
Summary
Images not appearing on your Webflow site usually result from publishing issues, HTTP vs HTTPS conflicts, image visibility settings, or CMS misconfigurations. Re-publishing the site and checking display settings and image formats typically resolves the problem.