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?

Thumbnail images not displaying on mobile in the exported version of your Webflow portfolio site is likely caused by missing assets, incorrect file paths, or mobile-specific styling issues.

1. Check Image File Paths in the Exported Code

• In exported projects, Webflow may use relative paths (e.g., images/project-thumbnail.jpg). If these paths break after moving your files to a different server or folder structure, images won’t load.
• Verify that the images are actually included in the exported images/ folder and that they match the filenames used in your HTML or CSS.

2. Ensure Images Are Not Set as CMS Content

• If the thumbnails are dynamically pulled from the Webflow CMS, they will not appear in a static export unless you:
• Manually replace CMS content with static images before exporting.
• Or replicate the CMS output by exporting static versions of those pages with hardcoded image elements.

3. Check Display Settings and Visibility Styles

• Go to Designer > Tablet and Mobile breakpoints, and check if any visibility settings (like display: none) are applied to the image elements.
• Also check if any "Hide on Mobile" styles or custom media queries are preventing those images from showing.

4. Confirm Correct File Formats and Sizes

• Check if the images are in supported formats (e.g., .jpg, .png, .webp) and not overly large (which could get blocked or take too long to load on mobile).
• Some image formats (like .svg or .webp) may not render properly on older mobile browsers if served incorrectly.

5. Test on a Live Server

• Previewing exported code locally (e.g., through file://) may cause image loading errors due to browser security restrictions.
• Upload your exported files to a live server or a static host (like Netlify or GitHub Pages) to test image loading in a real environment.

6. Check Lazy Loading or JavaScript Errors

• Webflow uses lazy loading on images (loading="lazy" by default). On mobile, if JavaScript is blocked or there's a scroll containment issue, images may not load.
• Open browser dev tools and inspect the image element to see if the src attribute is populated properly.
• Also check for JavaScript console errors that could interfere with loading images.

Summary

Your thumbnail images may be missing on mobile in the exported site due to broken file paths, CMS content not being included, visibility styles, or lazy loading combined with layout issues. Use a live server for accurate testing and verify that all assets are present and styled for mobile.