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
<img className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24" src={`https://github.com/${person[1]}.png`} onError={(e) => replace(e)} />
<img className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24" src={`https://github.com/${person[1]}.png`} onError={(e) => replace(e)} />
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:
function replace(e){
e.currentTarget.onError = null;
e.currentTarget.src = "/profileFallback.png"
}
function replace(e){
e.currentTarget.onError = null;
e.currentTarget.src = "/profileFallback.png"
}
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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Ben
BenOP2y ago
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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Ben
BenOP2y ago
@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
n1xx1
n1xx12y ago
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.
Want results from more Discord servers?
Add your server