如何在Next.js上重新加载未加载的图像

wribegjk  于 2023-05-17  发布在  其他
关注(0)|答案(2)|浏览(203)


Hello我有一些ipfs数据,它有300个图像。我想渲染它们,但当我试图渲染它们时,有时其中的3、4个没有加载。它给了我404错误,不会加载。所以即使我重新加载页面,那些没有加载的页面仍然没有加载。我不知道该怎么办。
我尝试了一些错误处理,如设置状态等。但没起作用
这是我的代码。

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;

piok6c0g

piok6c0g1#

您需要在next.config.js文件中添加ipfs.filebase.io域:

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

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

llew8vvj

llew8vvj2#

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

相关问题