[BUG] - fallbackSrc not working when the src image returns a 404

[ryankashi]

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

[linear]

ENG-1986 [BUG] - fallbackSrc not working when the src image returns a 404

[theresasogunle]

@ryankashi have you considered passing a height prop to the image? i think it should work after you do that

[ryankashi]

Just tested. The way how height affects src vs. fallbackSrc are different, even if the image passed into it is the same. In addition, the height prop is improperly affecting how the image should be rendered, especially when the component itself is responsive.

For example:

No Height specified, via src:

<Image src={fallbackSrc} fallbackSrc={fallbackSrc} isZoomed={true} alt="" className="object-cover aspect-square" />

No height specified, via fallbackSrc:

<Image src={'/image/fake_image.jpg'} fallbackSrc={fallbackSrc} isZoomed={true} alt="" className="object-cover aspect-square" />

Height specified, via src:

<Image src={fallbackSrc} fallbackSrc={fallbackSrc} height={720} isZoomed={true} alt="" className="object-cover aspect-square" />

No height specified, via fallbackSrc:

<Image src={'/images/fake_image.jpg'} fallbackSrc={fallbackSrc} height={720} isZoomed={true} alt="" className="object-cover aspect-square" />

[ryankashi]

Did some additional digging. This could be due to the component not rerendering when the image should switch to the fallback source.

For example, doing something like:

function TestFallbackImage(){
    const [key, setKey] = useState(0);
    const onError = function(){ setKey(key+1) }

    const src = '/images/fake_image.jpg';
    const fallbackSrc = '/images/fallback_image.jpg';

    return(
        <Image key={key} src={src} fallbackSrc={fallbackSrc} onError={onError}/>
    )
}

Will render SOMETHING, however the image itself does not fit correctly, and does not stay consistent with how it should render if it was passed directly into src.

Also to note, passing in a height and width should be optional for this component as well - you shouldn't have to pass these props in just to get a fallback image to render properly

Has anybody else been able to take a closer look into any of this?

Thanks!

[theresasogunle]

it could be because the fallbackSrc is rendered as a background-image of the image wrapper(a div element) which in turn means that without passing a height, the div will have no content thus, have a height of 0 which makes it not visible.