How to Reload Images that are not load, on Next.js

Hello I have some ipfs data and it has 300 images. I want to render them but when I try to render them sometimes 3 4 of them is not loaded. it gives me 404 error and won't load. So even if i reload page the ones with not loaded is still not load. They are perma not loaded, i don't know what to do.

I tried some error handling in <Image/> like setting state etc. but didn't work.

This is my code.

import Link from 'next/link';
import React, { useEffect, useCallback, useState } from 'react';
import { NextPage } from 'next';
import Image from 'next/image';
import style from '../styles/pagesStyles/darwinswap1.module.scss';
import InfiniteScroll from 'react-infinite-scroll-component';

const DarwinSwap1: NextPage = () => {
  const [ipfsData, setIpfsData] = useState([]);
  const [items, setItems] = useState([]);

  const fetchMoreData = () => {
    setItems((prevItems) => [...prevItems, ...ipfsData.slice(prevItems.length, prevItems.length + 20)]);
    if (items.length === 300) {
    }
  };

  useEffect(() => {
    const imageUrls = [];
    for (let i = 1; i <= 100; i++) {
      imageUrls.push(
        `https://ipfs.filebase.io/ipfs/bafybeiczmjtyrtomsynlge2esqmdde2vmhkjc2ydv5kbq2lqwg2oobeqeq/${i}.png`
      );
    }
    for (let i = 1001; i <= 1100; i++) {
      imageUrls.push(
        `https://ipfs.filebase.io/ipfs/bafybeiczmjtyrtomsynlge2esqmdde2vmhkjc2ydv5kbq2lqwg2oobeqeq/${i}.png`
      );
    }
    for (let i = 2001; i <= 2100; i++) {
      imageUrls.push(
        `https://ipfs.filebase.io/ipfs/bafybeiczmjtyrtomsynlge2esqmdde2vmhkjc2ydv5kbq2lqwg2oobeqeq/${i}.png`
      );
    }
    setIpfsData(imageUrls);
    setItems(imageUrls.slice(0, 20));
  }, []);

  console.log(items);
  return (
    <div>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={items.length === 300 ? false : true}
        loader={<p style={{ textAlign: 'center', fontWeight: 600, opacity: 0.8, fontSize: '20px' }}>Scroll ⬇️</p>}
        endMessage={
          <p style={{ textAlign: 'center', fontWeight: 600, opacity: 0.8, fontSize: '20px' }}>No more data to load.</p>
        }
      >
        <div className={style.container}>
          {items.map((item, i) => {
            return (
              <div className={style.nfts} key={i}>
                <Image layout="fill" src={item} alt={item} />
              </div>
            );
          })}
        </div>
      </InfiniteScroll>
      <div className={style.bottomContainer}>
        <div className={style.description}>
          Evoture NFTs are available through participation in our pre-sale or by buying them direct on OpenSeas!
        </div>
        <div className={style.buttonsContainer}>
          <div className={style.presaleButtonContainer}>
            <Link href="" className={style.presale}>
              Join the Private Sale
            </Link>
          </div>
          <div className={style.buyNft}>Buy NFT</div>
        </div>
      </div>
    </div>
  );
};

export default DarwinSwap1;

You need to add ipfs.filebase.io domain in your next.config.js file:

module.exports = {
  images: {
    domains: ["ipfs.filebase.io"],
  },
}

Reference: https://nextjs.org/docs/pages/api-reference/components/image#domains

<img onerror="dosomthing()" ...>