基于合约和nft ID获取nft图像的HTTP API

Question

我尝试了许多不同的想法，但无法找到如何通过HTTP请求获得NFT的图像。我试图找到一个返回令牌URI的HTTP API，但找不到任何内容。如果没有令牌URI，我就无法在ipfs上找到图像。

Answer 1

如果您得到"tokenUri"；并将其粘贴到浏览器

ipfs://tokenUriHERE

您将看到像这样的json格式的NFT元数据。

{
"name": "name it",
"image": "ipfs://QmR36VFfo1hH2RAwVs4zVJ5btkopGip5cW7ydY4jUQBrKW",
"description": "description",
"attributes": [
{
"trait_type": "Artist",
"value": "value"
},
] }

如果您获得图像URL并将其粘贴到浏览器，您将看到图像。

如果你想写一个代码来获取数据，只需向ipfs://tokenUriHERE发送get请求，获取JSON，检索图像，然后获取图像。

或者你可以使用库。在javascript中，web3.storage

import { Web3Storage } from 'web3.storage'
const token = process.env.API_TOKEN
const client = new Web3Storage({ token })
async function retrieveFiles () {
const cid =
'bafybeidd2gyhagleh47qeg77xqndy2qy3yzn4vkxmk775bg2t5lpuy7pcu'
// You can fetch data using any CID, even from IPFS Nodes or Gateway URLs!
const res = await client.get(cid)
const files = await res.files()
for (const file of files) {
console.log(`${file.cid}: ${file.name} (${file.size} bytes)`)
}
}
retrieveFiles()

Answer 2

如果您使用React构建，spectre.xyz中有一个很棒的库use-nft，它可以帮助抽象出NFT元数据的不一致格式，为您提供显示图像的相关URL。

你可以安装它与：

npm install --save use-nft ethers

在使用它之前，你必须将你的应用程序包装在一个提供商中，如图所示，但实际使用非常容易。

function Nft() {
const { loading, error, nft } = useNft(
"0xd07dc4262bcdbf85190c01c996b4c06a461d2430", // NFT contract address
"90473" // token ID
)
// nft.loading is true during load.
if (loading) return <>Loading…</>
// nft.error is an Error instance in case of error.
if (error || !nft) return <>Error.</>
// You can now display the NFT metadata.
return (
<section>
<h1>{nft.name}</h1>
<img src={nft.image} alt="" />
<p>{nft.description}</p>
<p>Owner: {nft.owner}</p>
<p>Metadata URL: {nft.metadataUrl}</p>
</section>
)
}