<Image> infinite loop on broken link

Answered

berkserbet posted this in #help-forum

2024-01-24T18:52:43.000Z

My site keeps requesting the image even when it gets a 404. I am trying to make it grab another image as backup on error. But it never requests the backup image.

This is what my component looks like:

<Image
  loader={imageKitLoader}
  src={image ? image : placeholderImage}
  onError={onImageError} 
  className="w-full rounded-box object-contain"
  width={480}
  height={480} 
  alt="Item Picture"
/>

And:

const placeholderImage = "https://....."
const onImageError = (e: any) => {
  e.target.src = placeholderImage
}

Answered by Northeast Congo Lion

export default function LocalImage = (props) => {

  const { src, fallbackSrc, className, ...rest } = props;
  
  const [ imgSrc, setImgSrc ] = useState(src); 
  
  if (!src) return <></>

  ..imgLoaderCode etc
  
  return (
    <Image
      onError={(e) => setImgSrc(fallbackSrc)}
      loader={imageKitLoader}
      src={imgSrc}
      {...rest}
    />
  );
}

View full answer

56 Replies

berkserbetOP

2024-01-24T18:58:14.000Z

Also, this is on the client side

Northeast Congo Lion

2024-01-24T19:03:22.000Z

where is loader function? pls show code

@Northeast Congo Lion where is `loader` function? pls show code

berkserbetOP

2024-01-24T19:04:26.000Z

Thanks!

const imageKitLoader = ({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) => {
  if (src[0] === '/') src = src.slice(1);
  const params = [`w-${width}`];
  if (quality) {
    params.push(`q-${quality}`);
  }
  const paramsString = params.join(',');
  var urlEndpoint = 'https://ik.imagekit.io/...';
  if (urlEndpoint[urlEndpoint.length - 1] === '/')
    urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1);

  if (src.includes("redd.it")) {
    return `${urlEndpoint}/r/${src.split("/").pop()}?tr=${paramsString}`;
  } else if (src.includes("postimg")) {
    return `${urlEndpoint}/postimg/${src.split(".cc/").pop()}?tr=${paramsString}`;
  } else {
    return `https://...`
  }
};

Northeast Congo Lion

2024-01-24T19:04:45.000Z

and inside console

what is the url it is requesting

show me 404 log

@Northeast Congo Lion show me 404 log

berkserbetOP

2024-01-24T19:05:28.000Z

Failed to load resource: the server responded with a status of 404 ()

Just tons of that

Northeast Congo Lion

2024-01-24T19:05:46.000Z

it should show a url

of what it is trying to request, failing that check network tab

berkserbetOP

2024-01-24T19:05:57.000Z

https://ik.imagekit.io/y7y0qqdyl/r/b98cldx4oeec1.jpg?tr=w-1080

Northeast Congo Lion

2024-01-24T19:06:04.000Z

expected

berkserbetOP

2024-01-24T19:06:07.000Z

Non existing url

I know

Northeast Congo Lion

2024-01-24T19:06:19.000Z

so u want to see if 404, use placeholder

berkserbetOP

2024-01-24T19:06:21.000Z

But I want it to stop after 1 404 and use backup

Yup!

Northeast Congo Lion

2024-01-24T19:06:41.000Z

ok idk if u can stop after 1 404

1 sec

could you maybe try onLoad?

not 100% how u can update image src on error

unless you create global component which uses placeholder img

and onError(() => return <FallBackImg /> )

berkserbetOP

2024-01-24T19:09:45.000Z

I have the onError

Northeast Congo Lion

2024-01-24T19:10:08.000Z

can u try above return component?

see if that works

berkserbetOP

2024-01-24T19:10:26.000Z

Yeah!

@Northeast Congo Lion see if that works

berkserbetOP

2024-01-24T19:10:56.000Z

That goes in the <Image> right? Sorry new to this

@berkserbet That goes in the <Image> right? Sorry new to this

Northeast Congo Lion

2024-01-24T19:11:04.000Z

yup

or u can

put it in ur

const onImageError = (e: any) => {
  return <FallbackImg />
}

berkserbetOP

2024-01-24T19:11:39.000Z

I now have:

  const onImageError = (e: any) => {
    e.target.src = placeholderImage
  }

Northeast Congo Lion

2024-01-24T19:11:54.000Z

yeah i dont think this is right way to update nextjs image component

what i would be doing which is easier:

return (
   {
     (image && image.src) && <Image /> 
   }
);

or can even do image?.src && <Image />

berkserbetOP

2024-01-24T19:13:56.000Z

The infinite loop is gone with:

  const onImageError = (e: any) => {
    <Image
      loader={imageKitLoader}
      src={placeholderImage}
      className="w-full rounded-box object-contain"
      width={480}
      height={480} 
      alt="Item Picture"
    />
  }

But not showing placeholder

Northeast Congo Lion

2024-01-24T19:14:24.000Z

better way to do it actually

is for the image component u store imgSrc in state

berkserbetOP

2024-01-24T19:15:09.000Z

The images on my site change every few mins

Northeast Congo Lion

2024-01-24T19:15:14.000Z

no no

so on Error

u update state to placeholder value

what i would do is create a CustomImage wrapper

@berkserbet The infinite loop is gone with: const onImageError = (e: any) => { <Image loader={imageKitLoader} src={placeholderImage} className="w-full rounded-box object-contain" width={480} height={480} alt="Item Picture" /> }

berkserbetOP

2024-01-24T19:16:59.000Z

Actually looks like it broke all images when I did this

Northeast Congo Lion

2024-01-24T19:17:33.000Z

export default function LocalImage = (props) => {

  const { src, fallbackSrc, className, ...rest } = props;
  
  const [ imgSrc, setImgSrc ] = useState(src); 
  
  if (!src) return <></>

  ..imgLoaderCode etc
  
  return (
    <Image
      onError={(e) => setImgSrc(fallbackSrc)}
      loader={imageKitLoader}
      src={imgSrc}
      {...rest}
    />
  );
}