HeroUI Version

2.2.6

Describe the bug

When I try to load an image with a fallbackSrc, the image at the fallbackSrc does not load. For example:

const fallbackSrc = '/images/image_that_does_exist.jpg';
const src = '/images/image_that_will_404.jpg'

<Image src={src} fallbackSrc={fallbackSrc} />

Instead of rendering fallbackSrc with my fallback Image, instead the <Image/> component will stay blank.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a nextjs app and put in the following code:

const fallbackSrc = '/images/image_that_does_exist.jpg';
const src = '/images/image_that_will_404.jpg'

<Image src={src} fallbackSrc={fallbackSrc} />

This is tested both in Chrome as well as Electron

Expected behavior

The image at /images/image_that_will_404.jpg will return a 404 in my console. Then, the <Image/> component should use the fallbackSrc and render this image instead

Screenshots or Videos

N/A

Operating System Version

Windows 10

Browser

Chrome