高新区建设局网站网站建设与开发试卷

前言

有人给我发了nft，但是没有图片，我就很纳闷为什么，所以想一探究竟

解决思路

先说下环境吧

Sepolia 测试网

metamask钱包

需要获取nft的合约地址和token id    钱包内  nft可以查得到

思路：

我的理解就是ERC721有标准的tokenURI方法，访问该方法可以获取指向元数据的连接，这个元数据存储量nft的基本信息{ "description": "xxx", "symbol": "xxx", "image": "xxx", "name": "xxx" }

话不多说请看代码

代码

import React, { useState } from 'react';
import useMetaMask from './index.js';
import { JsonRpcProvider,Contract } from "ethers";const Nfts = () => {const [tokenURI, setTokenURI] = useState(null);const [imageURL, setImageURL] = useState(null);// 配置 RPC 提供者（例如 sepolia 测试网）const provider = new JsonRpcProvider("https://sepolia.infura.io/v3/xxxx");// NFT 合约地址和 Token IDconst contractAddress = "xxxxx"; // 替换为你的 NFT 合约地址const tokenId = "xxxxx"; // 替换为你的 Token ID// ERC-721 ABI（只需要包含 tokenURI 方法）const abi = ["function tokenURI(uint256 tokenId) public view returns (string memory)"];// 创建合约实例const nftContract = new Contract(contractAddress, abi, provider);// 获取 Token URI 的函数const fetchTokenURI = async () => {try {const uri = await nftContract.tokenURI(tokenId);console.log("Token URI:", uri);setTokenURI(uri);// 如果 tokenURI 是一个 URL，尝试获取元数据if (uri.startsWith("http")) {const response = await fetch(uri);const metadata = await response.json();console.log("Metadata:", metadata);// 提取图片链接if (metadata.image) {setImageURL(metadata.image.startsWith("ipfs://")? metadata.image.replace("ipfs://", "https://ipfs.io/ipfs/"): metadata.image);}}} catch (error) {console.error("Error fetching token URI:", error);}};return (<div><button onClick={fetchTokenURI}>Fetch NFT Metadata</button>{/* 显示 tokenURI 和图片 */}{tokenURI && (<div><p>Token URI: {tokenURI}</p>{imageURL && (<img src={imageURL} alt="NFT" style={{ width: "300px", height: "300px" }} />)}</div>)}</div>);
};export default Nfts;