How to get the MIME type of an NFT's image?

Hi! First post here :slight_smile:

I’m working on a website with focus on physically printing NFT merchandise. For this we’d like to distinguish between NFT images based on whether they’re moving. However, not all metadata contains the file extension (png, jpg, gif, mp4) so filtering based on that doesn’t always work.

We’re currently using Moralis.Web3API.account.getNFTs to read out which NFTs the visitor has in their wallet.

Is there a good way to get the MIME file type of the images so we can filter whether we want to offer them for print?

I don’t know of an easy way other then trying to download the image and analyse it based on contents or what extra metadata is returned by that request in headers

You can use the mime-types library to do a lookup of the image link. mime-types - npm (npmjs.com)

And then use a switch to output the image accordingly or do whatever you want.

const mimeType = mime.lookup(imageLink);

switch (mimeType) {
case 'video/mp4':
      return (
        <video controls>
          <source src={`${imageLink}`} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      );

     // or logic

etc.

1 Like