Why are the thumbnail images not displaying on certain projects in the exported version of my Webflow portfolio site, specifically on mobile, when they appear fine in the Webflow preview?
TL;DR
- Verify image paths in exported HTML to ensure thumbnails point to correctly included assets.
- Check mobile CSS to ensure thumbnails aren’t hidden or overwritten by styles.
- Set images to "eager" loading if lazy-loading causes issues post-export.
- Confirm all required image files are present in the exported images folder.
- Test on actual mobile devices or emulators to pinpoint rendering issues.
Thumbnail images not displaying on mobile in your exported Webflow site usually happens due to missing assets, incorrect image path references, or CSS media query conflicts after export.
1. Check the Image Source Paths After Export
- When you export a Webflow project, image paths can break if they’re referenced dynamically or through CMS fields.
- Open the exported HTML file and inspect the
<img>tags or background image URLs using browser DevTools. - Ensure that the
srcorbackground-imagepaths point to actual image files included in theimages/folder of your export package. - If they show a 404 error or blank source, it likely means the image wasn't exported properly.
2. Verify Display Settings and Styles on Mobile
- In Webflow’s Designer, check your mobile breakpoints for the affected thumbnails.
- Ensure elements aren't being hidden via CSS using
display: none,visibility: hidden, oropacity: 0. - Common issues include:
- A class or combo class only applying
display: blockon desktop or tablet, but not on mobile. - Overlapping elements causing the thumbnail to be visually obscured.
3. Make Sure Images Aren’t Lazy-Loaded Incorrectly
- Webflow uses native lazy-loading (
loading="lazy") on images by default. - Some browsers or custom scripts may not handle this well on export, especially if JavaScript is removed or modified.
- Try setting the affected images to "eager" loading in the image settings panel in Webflow, then re-export.
4. Confirm All Assets Were Fully Exported
- After exporting, check that the
imagesfolder includes all thumbnails and that their filenames match exactly (case-sensitive). - Pay special attention to CMS-driven content, where images might be hosted on Webflow’s CDN and not exported with the static HTML.
5. Test on Real Mobile Devices and Emulators
- Sometimes thumbnails may appear fine via responsive preview but not on specific devices.
- Use browser dev tools to simulate devices or test directly on phones to spot differences in behavior.
Summary
Thumbnail visibility issues in exported Webflow sites on mobile are typically caused by missing image assets, CSS visibility settings, or lazy-loading conflicts. Verify image paths, inspect mobile-specific styling, and ensure all related images are included in the export package.
