Handle 504 gateway timeout error in Image

Unanswered

Transvaal lion posted this in #help-forum

Transvaal lionOP

2023-12-21T08:03:36.000Z

Hi all!

Is there a way to handle 504 gateway timeout error in Image component? I was trying to use onError handler but it doesn't trigger it, gateway timeout usually appears after ~ 20 seconds

This is my Avatar component in which i'm trying to handle it

const Avatar: FC<AvatarProps> = ({ src, size }) => {
  const { avatarSizeClass } = SIZES[size];

  const handleOnError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
    e.currentTarget.src = DEFAULT_AVATAR_URL;
  };

  return (
    <div
      className={`flex items-center ${avatarSizeClass} bg-neutral-5 rounded-full overflow-hidden w-full h-full relative`}
    >
      <Image
        src={src}
        alt="avatar"
        onError={handleOnError}
        objectFit="cover"
        layout="fill"
    </div>
  );
};

6 Replies

@Transvaal lion Hi all! Is there a way to handle 504 gateway timeout error in Image component? I was trying to use `onError` handler but it doesn't trigger it, gateway timeout usually appears after ~ 20 seconds This is my Avatar component in which i'm trying to handle it const Avatar: FC<AvatarProps> = ({ src, size }) => { const { avatarSizeClass } = SIZES[size]; const handleOnError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => { e.currentTarget.src = DEFAULT_AVATAR_URL; }; return ( <div className={`flex items-center ${avatarSizeClass} bg-neutral-5 rounded-full overflow-hidden w-full h-full relative`} > <Image src={src} alt="avatar" onError={handleOnError} objectFit="cover" layout="fill" </div> ); };

Ray

2023-12-21T08:10:53.000Z

hi, try this

"use client";

import Image from "next/image";
import { useState } from "react";

export default function Img() {
  const [error, setError] = useState(false);
  const defaultUrl =
    "";

  return (
    <Image
      src={error ? defaultUrl : "http://sdf.com/dfdf"}
      alt=""
      width={400}
      height={280}
      onError={(e) => {
        setError(true);
      }}
    />
  );
}