Issue loading NFT images on deployed marketplace

Hey everyone,

I’m working on a cool NFT marketplace project using Thirdweb. Everything’s great when I run it locally, but I’m hitting a snag after deploying on Netlify. The NFT images just won’t show up!

I’ve been scratching my head over this for a while now. It’s weird because it works fine on my machine, but as soon as it’s live, poof! No images.

Has anyone run into something similar? I’d love some ideas on what might be causing this. Even a small hint could help me figure it out.

If you need more details or want to see some specific code, just let me know. I’ll keep an eye on this thread and really appreciate any help you can offer. Thanks in advance!

hey there OwenGadget78! that sounds like a frustrating problem ur dealing with. i’ve actually run into something similar before with my own nft project. have you checked if the image urls are being correctly fetched from the blockchain after deployment? sometimes the connection to the blockchain can be a bit finicky on live sites.

also, just curious - are you using ipfs for storing the nft images? if so, maybe theres an issue with how the ipfs gateway is being accessed on the deployed site?

oh, and another thought - have you tried checking the browser console for any errors? that might give some clues about whats going wrong.

let me know if any of that helps or if you want to bounce around some more ideas! nft projects can be tricky but theyre so cool when you get em working :slight_smile:

yo OwenGadget78, sounds like a pain! quick thought - did u double-check ur .env file on netlify? sometimes those pesky environment variables don’t carry over right. also, make sure ur using the right rpc url for the network ur nfts are on. lemme know if that helps!

I’ve encountered similar issues with NFT image loading on deployed sites. One overlooked aspect could be CORS (Cross-Origin Resource Sharing) settings. Ensure your server is configured to allow requests from your Netlify domain.

Also, verify that your image URLs are absolute, not relative. Relative paths might work locally but fail on deployment. Double-check your image retrieval logic – are you constructing the URLs correctly in the production environment?

Lastly, consider implementing a fallback image. This can help diagnose if it’s a loading issue or if the URLs are incorrect. If fallbacks display but NFT images don’t, it likely points to a problem with the image source URLs or blockchain data retrieval.

Hope this helps troubleshoot your deployment issues.