Image Fetching bug with NextJS
So I'm trying to load in a set of profile pictures for a list of contributors to a repo. I have a list of everyone's github handle's. I'm fetching the profile pictures like so
Their are a few github handle's that were submitted incorrectly, so I'm trying to replace those images with a default thumbnail using the onError callback:
If I don't refresh the page for a few minutes, and then refresh the page, everything works as expected. But if I refresh right afterwards , the fallbackImg gets replaced with the deafult 404 img. Even weirder, I can right click on the missing img, select "load image" and the image loads in properly.
Any clue what's going on here?
5 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Hmm, interesting approach @undefined. Since I have like 70 unique images, it's not really realistic to have like 70 useStates, lol. How would you get around that?
I tried using an
Image
tag earlier, but for some reason it just keep infinitely spamming requests for the missing images, and they ended up being all white instead of having the default 404 img like in my video example, so I just went back to <img>Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@undefined Thanks for the help, I just got around to implementing your first solution and it worked. I do wonder why the plain old img tag is buggy tho
it may be some issues with streaming. are you using the app dir?
anyway you are modifying something that is managed by react manipulating the dom, it usually is a bad idea anyway.