查询NFT图片地址

前言

有人给我发了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 ID
  const 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;