I’m working on an NFT platform and running into a weird issue. Everything works fine when I test it on my local machine - all the NFT images load without any problems. But as soon as I push the code live, the images just won’t show up anymore.
I’m using Thirdweb for the blockchain stuff and deployed everything through Netlify. The strange part is that only the images are broken - everything else seems to work normally.
Has anyone run into something similar? I’m thinking it might be a path issue or maybe something with how the images are being fetched, but I can’t pinpoint exactly what’s going wrong.
If you need to see specific parts of my code to help troubleshoot, just let me know and I can share whatever you think would be useful. Really hoping someone has dealt with this before!
sounds like a netlify build path issue. check if your images are copying to the build folder during deploymnt. local dev servers handle files differntly than prod builds, so assets sometimes get missed.
hmm this is really interesting - I’ve seen this exact scenario before and it’s usually one of those sneaky deployment gotchas that make you want to pull your hair out lol
quick question though - are you storing the images locally in your project, or hosting them somewhere else like IPFS? also, when you say the images “won’t show up”, do you mean they’re completely broken (showing broken image icons) or just taking forever to load?
oh and here’s something worth checking - look at the actual image URLs being generated in production vs development. sometimes paths get mangled during the build process. you can right-click where an image should be and “inspect element” to see what URL it’s trying to fetch.
another thought - since you mentioned thirdweb, are you using their storage solution or handling image hosting separately? sometimes there are weird interactions between how thirdweb expects to find assets and how netlify serves them.
what does your console show when this happens? any 404s or other errors?
It appears that you may be facing a CORS (Cross-Origin Resource Sharing) issue. I encountered a similar problem with my NFT platform. When fetching images from external sources like IPFS, the behavior can vary between local testing and production environments, leading to stricter browser security measures in production. I recommend checking your browser’s network tab for any 403 errors or failed requests related to the images. Additionally, ensure that you are not using any hardcoded localhost URLs that need to be replaced with your actual image sources. Since you’re utilizing Thirdweb, verify that your contract metadata correctly points to the appropriate IPFS gateway; sometimes, metadata may look fine, but the image URLs could have formatting issues or be pointing to incompatible gateways.