I have a Next.js app page that attempts to load an image using the <Image /> component

// page.jsx

import MyComponent from './MyComponent'

export default async function Page() {
  return <MyComponent imageUrl="https://example.com/lBAyYA.png" />
}

// MyComponent.jsx

"use client"

export default function MyComponent({ imageUrl }) {
  return <Image src={ imageUrl } />
}

The problem is, this image is created by a background task, and sometimes, the user gets to this page before the image is ready to be served, resulting in a 404 error on the image. If the user simply refreshes the page a couple seconds later, the image is usually ready to be served and appears as expected.

How can I continuously attempt to fetch the image until it doesn’t give a 404 error, so the user doesn’t have to manually refresh the page?