8 replies

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?

TTC

Theo's Typesafe Cult•4y ago•

8 replies

Ben

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"
}

Image Fetching bug with NextJS

Similar Threads

Image Fetching bug with NextJS

Similar Threads

Similar Threads

Similar Threads