Docs

ThirdwebNftMedia

Component that renders an NFT from given a metadata object.

Under the hood, if the image property of the metadata is an URL/IPFS URI, it is fetched from the source. The mime type of the asset is determined and the appropriate component is rendered on the UI.

For example, if your NFT is an image, the img tag will be used. If it is a video, the video tag will be used, etc.

The component currently supports:

  • Images
  • Videos
  • Audio files
  • 3D Models
  • SVGs (for onchain NFTs)
  • iframes and HTML
  • If none of these are appropriate, the fallback is a link to the asset
import { ThirdwebNftMedia } from "@thirdweb-dev/react";

Usage

Provide the metadata object to the component to render the NFT.

The NFT’s image is used as the media, and the name is used as the alt text for the media.

import {
  ThirdwebNftMedia,
  useContract,
  useNFT,
} from "@thirdweb-dev/react";
 
function Home() {
  // Connect to your NFT contract
  const { contract } = useContract("{{contract_address}}");
  // Load the NFT metadata from the contract using a hook
  const { data: nft, isLoading, error } = useNFT(contract, "0");
 
  // Render the NFT onto the UI
  if (isLoading) return <div>Loading...</div>;
  if (error || !nft) return <div>NFT not found</div>;
 
  return <ThirdwebNftMedia metadata={nft.metadata} />;
}

Props