How can I resolve the issue of images not loading when changing pages or searching for results on Webflow, specifically with regards to a pagination setup using Finsweet? This problem only occurs on the production site, as the staging site works without any issues.
TL;DR
If images are not loading when switching pages or searching within a Finsweet pagination setup, but only on the production site, the issue is likely due to missing CMS image fields, lazy loading conflicts, or cache-related problems.
1. Check CMS Image Fields Exist
- Verify that all CMS image fields are properly populated in production.
- Staging may use different CMS data, so a missing field in production could break image loading.
2. Disable Lazy Loading for Key Images
- Webflow lazy loads images by default, but Finsweet’s pagination might require them to load immediately.
- Select the image inside the Webflow Designer, go to Element Settings, and change Lazy load: Disabled.
3. Ensure Finsweet's Scripts Load Correctly
- Open the browser console (F12 or Cmd + Option + I) and check for JavaScript errors.
- Make sure Finsweet’s scripts are correctly placed inside Page Settings > Custom Code > Before
</body>. - Example script:
```html```
4. Clear Webflow’s CDN & Production Cache
- Webflow caches assets aggressively, which may cause outdated images or scripts to persist.
- Publish the site again and test in an incognito/private browser window.
- If issues persist, try changing the image filenames and re-uploading them.
5. Compare Published vs. Staging Source Code
- Inspect the image URLs in both staging and production via right-click -> Inspect Element in the browser.
- Check if production images are missing or pointing to incorrect links.
6. Verify CORS & Hosting Configuration
- If Webflow’s custom domain setup is misconfigured, images may fail due to CORS restrictions.
- Go to Project Settings > Hosting and ensure CNAME & A records are correctly set.
Summary
Check for missing CMS image fields, disable lazy loading, verify Finsweet scripts are loading, clear the Webflow CDN cache, and inspect image URLs between staging and production. If images are still not loading, test in an incognito window to rule out local caching issues.