Fallback images for Images and Icons

Question

Is there a way i would have a standard svg file that could function as a backup if all other pictures and icons fail to load (due to not fetching or just some error on client side).

As for Icons i use a SVGR library to import svgs as components basically and i dont really see a workaround here.

For images i use next's and it has an onError function but it just causes in infinite loop. Most of my images and icons are in the public folder, so is there even any sense of having a backup image? Is there a way to force an icon to load everytime the app builds so it is available at everytime even if there is no network?

But for the fetched ones i need it, as i dont want to be showing blank space

Answer 1

You could try something like this, a general component for images.

 <img 
   src={hasError ? '/path/to/fallback/image.png' : props.src} 
   onError={()=> setHasError(true)} 
   alt={props.alt}
 />