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;
2条答案
按热度按时间piok6c0g1#
您需要在
next.config.js
文件中添加ipfs.filebase.io
域:参考:https://nextjs.org/docs/pages/api-reference/components/image#domains
llew8vvj2#