I’m working on creating an NFT trading platform and using Thirdweb for the backend services. Everything works great when I test it on my local development environment - all the NFT images load without any problems.
However, when I push the same code to production using Netlify hosting, the images completely fail to load. The rest of the site functions normally, but where the NFT images should appear, I just get broken image placeholders or empty spaces.
I’m pretty confused about what might be causing this difference between local and production environments. Has anyone run into similar issues with image loading after deployment? I’m hoping someone can point me in the right direction so I can troubleshoot this properly.
I can share specific code snippets if that would help with debugging this issue.
for sure, it could b a CORS problem! netlify can be picky with images. double check your img paths and make sure those r public. if they r behind any auth, netlify might not let 'em load. gl!
This screams environment variable issue. Had the same problem with my marketplace - turns out local was pulling images from a completely different source than production. Check for hardcoded localhost URLs in your image paths or API calls. Make sure your Thirdweb API keys are set up right in Netlify’s environment settings. Also, some NFT metadata URIs use IPFS gateways that get blocked or run super slow in production. Switch to a more reliable gateway like Pinata or Infura if you’re using the default one. Browser console will show you exactly which URLs are failing - that’ll tell you if it’s config or gateway related.
Hmm, this is interesting! A few questions to help narrow it down:
When you say images work locally - are you testing with actual deployed NFTs or mock data? Local environments are often more forgiving with mixed content (http vs https).
What’s happening in your browser’s network tab on the production site? Are you seeing 404s, timeouts, or something else?
Thirdweb handles most of the heavy lifting, but I’m wondering if Netlify’s static content serving is causing issues. Are you using any image optimization or lazy loading libraries that behave differently in production?
One more thing - try accessing the image URLs directly in your browser while on the production site. This’ll tell us if it’s a rendering issue or if the images just aren’t reachable from Netlify’s servers.