Theo's Typesafe Cult•3y ago

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•3y ago

Message Not Public

BenOP•3y 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•3y ago

Message Not Public

BenOP•3y 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•3y 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.

Gaming

Programming

Image Fetching bug with NextJS