<Image infinite loop
Answered
Broad-snouted Caiman posted this in #help-forum
Broad-snouted CaimanOP
<Image
src={imageUrl}
width={1}
height={1}
onError={(e) => {
e.target.src = '/cat-profile.png';
}}
/>
I would like to default to another image if it failed to load, but it enters an infinite loop.
Right now I can fix it with state as imageUrl and onError change state, but it floods console with errors from failing to load first.
Any help would be appreciated, Thank you.
src={imageUrl}
width={1}
height={1}
onError={(e) => {
e.target.src = '/cat-profile.png';
}}
/>
I would like to default to another image if it failed to load, but it enters an infinite loop.
Right now I can fix it with state as imageUrl and onError change state, but it floods console with errors from failing to load first.
Any help would be appreciated, Thank you.
8 Replies
@Broad-snouted Caiman <Image
src={imageUrl}
width={1}
height={1}
onError={(e) => {
e.target.src = '/cat-profile.png';
}}
/>
I would like to default to another image if it failed to load, but it enters an infinite loop.
Right now I can fix it with state as imageUrl and onError change state, but it floods console with errors from failing to load first.
Any help would be appreciated, Thank you.
Double-striped Thick-knee
hey, this code worked perfectly for me when i put a valid src in onError event but it goes into loop when I give it a wrong src in onError event. so maybe your /cat-profile.png is wrong
can you make sure that u put a valid path of that image?
Broad-snouted CaimanOP
ok ill try
still infinite loop
<Image
src={
width={300}
height={300}
alt='profile pic'
onError={(e) => {e.target.src="https://firebasestorage.googleapis.com/v0/b/justcats-24a26.appspot.com/o/cat-profile.png?alt=media&token=9c7e9afe-2231-4b72-899e-ec7ce58352f7"
}}
/>
<Image
src={
https://firebasestorage.googleapis.com/v0/b/justcats-24a26.appspot.com/o/${item.friendUid}_avatar?alt=media&token=def9f697-f938-4c47-b085-e66ba888d929 || "https://firebasestorage.googleapis.com/v0/b/justcats-24a26.appspot.com/o/cat-profile.png?alt=media&token=9c7e9afe-2231-4b72-899e-ec7ce58352f7" }width={300}
height={300}
alt='profile pic'
onError={(e) => {e.target.src="https://firebasestorage.googleapis.com/v0/b/justcats-24a26.appspot.com/o/cat-profile.png?alt=media&token=9c7e9afe-2231-4b72-899e-ec7ce58352f7"
}}
/>
Broad-snouted CaimanOP
k
Thank you very much, it worked!!!
Double-striped Thick-knee
Glad to hear it worked! You're welcome! 😊