Set a default value for Image src in next.js

Question

i'm trying to set a default value for image src in the Image component in next.js. i can't find any option to do that, for case the server response with status code 400. corrently i'm getting in the console text like:

The requested resource isn't a valid image for <url for invalid image here> received inode/x-empty

i want to return a default image in case the requested image doesn't found. thanks in advece!

i tried to build a component like:

const CustomImage = ({
                         src = placeholder,
                         alt = "alt",
                         size = "125px",
                         cycle = false
                     }) => {
    return <Image
        src={src}
        width={size}
        height={size}
        alt={alt}
        quality={"100"}
        layout={"fixed"}
        style={{
            borderRadius:
                cycle ? "50%" : ".15em"
        }}
    />
}

and it doesn't help.

EDIT: after a lot of searching, i have a component that should take care of all the cases, but when i'm getting 404 error it stil showing broken image.

const CustomImage = ({
                         src = placeholder,
                         alt = "alt",
                     }) => {

    const [imageError, setImageError] = useState(false);

    return <Image
        src={imageError ? placeolder : src}
        width={size}
        height={size}
        alt={alt}
        onLoadingComplete={(result) => {
            if (result.naturalWidth === 0) setImageError(true)
        }}
        onError={(event) => setImageError(true)}
        onEmptied={() => setImageError(true)}
    />
}

Add the default image into the public folder and try like this `````` — a.prakash, May 07 '22 at 18:59
This looks similar to https://stackoverflow.com/questions/66949606/what-is-the-best-way-to-have-a-fallback-image-in-nextjs - do any of those solutions help? — John Detlefs, May 07 '22 at 19:59
@YeudaBy - you haven't answered julio's question... for which cases does it not work for? — John Detlefs, May 11 '22 at 23:39
When i'm getting 404 error from the server. on the console the error showing up, but ```onError``` doesn't handle it. — YeudaBy, Jun 12 '22 at 22:02

score 1 · Accepted Answer · answered Jun 12 '22 at 23:06

1

In my case, the right way to do that is by onErrorCapture.

answered Jun 12 '22 at 23:06

YeudaBy

11
5

Set a default value for Image src in next.js

1 Answers1