MediaRenderer

Component that renders any asset stored on IPFS (or anywhere else), given the IPFS URI / URL.

Under the hood, the asset is fetched from IPFS through the thirdweb IPFS gateway (or just a regular fetch if the src is not an IPFS URI). The mime type of the asset is determined and the appropriate component is rendered on the UI.

For example, if the URI points to 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 on-chain NFTs )

• iframes and HTML

• If none of these are appropriate, the fallback is a link to the asset

The default size of rendered media is 300px x 300px, but this can be changed using the width and height props.

You can use npx thirdweb upload <path/to/file> to upload any file to IPFS and get the IPFS URI.

Provide the IPFS URI (or any URL that points to media) to the src prop to render the asset.

import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X" />
  );
}