Today’s article will show you how to get images from NFT collections using the Moralis NFT image API. Thanks to the accessibility of this tool, you can seamlessly generate low, medium, and high-resolution thumbnails for any NFT image with a single API call. You simply need to call one of the supported endpoints while setting the media_items parameter to true. Here’s an example of what it looks like for the getContractNFTs() endpoint:
const Moralis = require("moralis").default;
const { EvmChain } = require("@moralisweb3/common-evm-utils");
const runApp = async () => {
await Moralis.start({
apiKey: "YOUR_API_KEY",
// ...and any other configuration
});
const address = "0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB";
const chain = EvmChain.ETHEREUM;
const response = await Moralis.EvmApi.nft.getContractNFTs({
address,
chain,
"mediaItems": true,
});
console.log(response.toJSON());
};
runApp();You just have to add your Moralis API key, configure the address and chain parameters, and run the script. In return, you’ll get an array of tokens from the collection in question, all of which have NFT image previews attached to them. Here’s an example of what the response will look like:
// ...
"media": {
"mimetype": "image/png",
"parent_hash": "0x21ba1263dd63696f0d9ede101b00a4e2f4985a854483076c92a3415624fca051",
"status": "success",
"updatedAt": "2023-09-15T03:23:50.945Z",
"media_collection": {
"low": {
"height": 100,
"width": 100,
"url": "https://nft-preview-media.s3.us-east-1.amazonaws.com/evm/0x1/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/0xed1b0d5a973a63694e3d8cfb1a5ace4485b37eba2a7ea846a1f5e52ba934be0e/low.png"
},
"medium": {
"height": 250,
"width": 250,
"url": "https://nft-preview-media.s3.us-east-1.amazonaws.com/evm/0x1/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/0xed1b0d5a973a63694e3d8cfb1a5ace4485b37eba2a7ea846a1f5e52ba934be0e/medium.png"
},
"high": {
"height": 500,
"width": 500,
"url": "https://nft-preview-media.s3.us-east-1.amazonaws.com/evm/0x1/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/0xed1b0d5a973a63694e3d8cfb1a5ace4485b37eba2a7ea846a1f5e52ba934be0e/high.png"
}
},
"original_media_url": "https://www.larvalabs.com/cryptopunks/cryptopunk9082.png"
},
"possible_spam": false,
"verified_collection": true
},
// ...From here, you can now seamlessly integrate the NFT images into your platform to create a more compelling user experience!
If you’d like to learn more about other supported endpoints and how this works in further detail, then join us in this article or check out the official NFT image previews documentation.
Also, don’t forget to sign up with Moralis if you want to access this industry’s leading NFT API. You can create your account for free and start building NFT projects in the blink of an eye!
Overview
Are you looking to build an NFT marketplace, NFT game, Web3 wallet, or any other platform centered around non-fungible tokens? Well, no matter what NFT-based development endeavor you want to embark on, you’ll need a seamless way to fetch NFT images. However, this is easier said than done, and querying a blockchain network for data can be a tedious task. Fortunately, you can sidestep the challenges by leveraging an NFT image API. To learn more about this, join us in this article as we introduce you to the Moralis NFT API!
Today’s article will start by covering the intricacies of NFT images. We’ll then immediately jump straight into the Moralis NFT API to explain why this is the industry’s premier interface. From there, we’re going to cover the NFT image fetching capabilities of the Moralis NFT API and how it works in practice. As such, if you’re already familiar with the ins and outs of NFT images, feel free to skip straight into the ”3-Step Tutorial: How to Get Images from NFT Collections…” section.
In addition, if you’re interested in building more sophisticated Web3 projects, we recommend checking out additional tools Moralis offers. The NFT API only scratches the surface, and some other industry-leading features include the Streams API and the Price API. With the Streams API, you can seamlessly set up Moralis webhooks to get notified about critical on-chain events. And with the Price API, you can effortlessly fetch all the pricing data you need!
With the tools above, you can build Web3 projects significantly faster and more efficiently. Consequently, take the time now to sign up with Moralis for free, and you’ll be able to leverage the true power of blockchain technology in a heartbeat!
Nevertheless, let’s kickstart this article by exploring the intricacies of NFT images!
What is an NFT Image?
To adequately explain what an NFT image is, we need to understand the basic fundamentals of NFTs. So, what is an NFT?
NFT is an abbreviation for ”non-fungible token”. The term ”non-fungible” comes from conventional economics and describes one-of-a-kind assets with distinctive properties. Consequently, an NFT is an entirely unique cryptographic token that exists on a blockchain network like Ethereum.
The uniqueness and immutability attributes of NFTs make them perfect for representing ownership of other one-of-a-kind assets like images, digital art, music, videos, tickets, in-game items, etc.
Here, it’s crucial to emphasize the keywords ”representing ownership”. Essentially, the NFTs themselves aren’t actual images, videos, or other content; instead, they serve as unique tokens pointing to another digital or physical item in their metadata.
So, with that in mind, what is an NFT image?
In short, an NFT image is the image that a token is associated with and points to in its metadata. These images can come in many formats, including JPG, JPEG, GIFs, TIFF, PNG, etc. The images themselves are typically stored off-chain using a decentralized file storage system like the InterPlanetary File System (IPFS).
However, the images are a vital part of the NFTs and are sometimes what gives them value. And since an image is linked to a certain NFT, owning that NFT often implies ownership of or proof of authenticity of that particular asset.
NFTs Dapps and Best NFT APIs
The Web3 industry witnessed a notable NFT boom back in 2021, resulting in NFTs becoming widely recognized among the general population. At this time, people really started to understand the utility of these tokens, and the result has been the emergence of many prominent NFT-centered platforms!
NFTs are highly dynamic assets, meaning they have a lot of different use cases. And there are many platforms you can build around these tokens, including NFT marketplaces, NFT games, Web3 wallets, portfolio trackers, and much more.
If you’d like, you can check out one of our previous articles to learn more about NFT utility!
Nevertheless, no matter what NFT-based platform you want to create, you’ll always need an accessible way to get and integrate NFT data, such as images, into your project. However, querying a blockchain network like Ethereum for the necessary information is tedious. Also, it has generally required an abundance of development time and resources. Fortunately, you can now circumvent this by using Moralis’ industry-leading free NFT API!
The Moralis NFT API offers unmatched performance and covers over three million NFT collections. This includes everything from established projects like CryptoPunks to less-known NFTs that dropped just a few seconds ago.
Also, the Moralis NFT API is cross-chain compatible and supports more than ten Ethereum Virtual Machine (EVM) chains, including Ethereum, Polygon, BNB Smart Chain, Arbitrum, and many others.
The Moralis NFT API also provides many features, making it stand out as the industry’s #1 interface. With only a single line of code, you can get all NFTs owned by a user address, get ERC-721 on-chain metadata, track trades by marketplace, fetch NFT collections, and much more.
Consequently, with Moralis’ NFT API, you can avoid reinventing the wheel and build your NFT-based projects both faster and smarter!
NFT Image API
The Moralis NFT API is also a capable NFT image API, as it allows you to seamlessly generate thumbnails in low, medium, and high resolution for NFT images with a single line of code!
With this feature, you can effortlessly improve the user experience of your NFT-based platforms by providing images optimized for different use cases. As a result, you’ll be able to integrate faster-loading images into your applications, reducing page load times and enhancing performance!
The Moralis NFT image API currently supports multiple image formats, including PNG, GIFs, JPEG, JPG, TIFF, and others. What’s more, in the future, we’re planning to add support for other media formats, including video.
So, how does the NFT image API work?
NFT image previews will be included when the query parameter media_items is set to true. And NFT thumbnail previews are currently supported by all endpoints returning NFTs:
getContractNFTs()getNFTMetadata()getMultipleNFTs()getWalletNFTs()getNFTOwners()getNFTTokenIdOwners()
Let’s use the getContractNFTs() endpoint to illustrate how the NFT image API works in practice!
3-Step Tutorial: How to Get Images from NFT Collections Using the Moralis NFT Image API
In the following sections, we’ll show you how to get images from NFT collections using the Moralis NFT image API. To illustrate the process, we’ll be using the getContractNFTs() endpoint as an example. Thanks to the accessibility of this tool, you can get the data you need in three straightforward steps:
- Get a Moralis API key
- Call the
getContractNFTs()endpoint with themedia_itemparameter - Run the script
However, before we dive into the first step, you initially need to deal with a few prerequisites!
Prerequisites
Before you can continue, you need to install and set up the following:
- Node v14+
- NPM/Yarn
You also need to launch your preferred integrated development environment (IDE), create a new project folder, open a new terminal, and run the following command in the project’s root folder to install the Moralis SDK:
npm install moralis @moralisweb3/common-evm-utils
That’s it; you’re now ready to continue with the tutorial!
Step 1: Get a Moralis API Key
The first thing you’ll need is an API key to make calls to the Moralis NFT image API. As such, if you haven’t already, click on the ”Start for Free” button at the top right of the Moralis website and set up your account:
Next, click on the ”Settings” tab, scroll down, and copy your API key:
Keep the key close at hand, as you’ll need it in the second step!
Step 2: Call the getContractNFTs() Endpoint with the media_item Parameter
Now, with an API key at hand, you’re ready to make calls to the Moralis NFT image API. As such, set up a new ”index.js” file and input the following code:
const Moralis = require("moralis").default;
const { EvmChain } = require("@moralisweb3/common-evm-utils");
const runApp = async () => {
await Moralis.start({
apiKey: "YOUR_API_KEY",
// ...and any other configuration
});
const address = "0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB";
const chain = EvmChain.ETHEREUM;
const response = await Moralis.EvmApi.nft.getContractNFTs({
address,
chain,
"mediaItems": true,
});
console.log(response.toJSON());
};
runApp();Next, replace YOUR_API_KEY with the Moralis API key you copied in the previous step:
From here, configure the address constant to fit your request by adding the address of the collection you wish to query. Also, if you want to get blockchain data from another network, make sure to change the chain parameter accordingly:
We then pass address and chain as parameters when calling the getContractNFTs() endpoint. What’s more, to get the NFT thumbnail previews, we also make sure to include the media_items parameter and set it to true:
That’s all you need to do; all that remains from here is running the script!
Step 3: Run the Script
To run the script, open a new terminal, cd into the project’s root folder, and execute the following command:
node index.js
In return, you’ll receive a response looking something like this containing low, medium, and high-resolution images for the NFTs in the collection:
// ...
"media": {
"mimetype": "image/png",
"parent_hash": "0x21ba1263dd63696f0d9ede101b00a4e2f4985a854483076c92a3415624fca051",
"status": "success",
"updatedAt": "2023-09-15T03:23:50.945Z",
"media_collection": {
"low": {
"height": 100,
"width": 100,
"url": "https://nft-preview-media.s3.us-east-1.amazonaws.com/evm/0x1/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/0xed1b0d5a973a63694e3d8cfb1a5ace4485b37eba2a7ea846a1f5e52ba934be0e/low.png"
},
"medium": {
"height": 250,
"width": 250,
"url": "https://nft-preview-media.s3.us-east-1.amazonaws.com/evm/0x1/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/0xed1b0d5a973a63694e3d8cfb1a5ace4485b37eba2a7ea846a1f5e52ba934be0e/medium.png"
},
"high": {
"height": 500,
"width": 500,
"url": "https://nft-preview-media.s3.us-east-1.amazonaws.com/evm/0x1/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/0xed1b0d5a973a63694e3d8cfb1a5ace4485b37eba2a7ea846a1f5e52ba934be0e/high.png"
}
},
"original_media_url": "https://www.larvalabs.com/cryptopunks/cryptopunk9082.png"
},
"possible_spam": false,
"verified_collection": true
},
// ...If you visit the links, you can view each thumbnail:
From here, you can now seamlessly integrate the various thumbnails into your NFT projects to create a more compelling user experience!
That’s it; when working with the Moralis NFT image API, it doesn’t have to be more challenging to get NFT images. And if you have followed along this far, you’ll have no trouble fetching and integrating NFT data into your future Web3 projects. As such, with Moralis, it has never been easier to build NFT-based platforms!
Moreover, you can follow the same steps for the other endpoints supported by NFT image previews. In doing so, you can, for instance, get NFT image previews for individual tokens, all tokens from a specific Web3 wallet, and much more.
Summary: Best NFT Image API
In today’s article, we dove into the ins and outs of the Moralis NFT API. In doing so, we learned that it’s also a capable NFT image API you can use to get thumbnail previews for any token. We also showed you how to use this tool to fetch images from NFT collections in three straightforward steps:
- Get a Moralis API key
- Call the
getContractNFTs()endpoint with themedia_itemparameter - Run the script
You can follow the same steps for any other endpoint that supports NFT image previews. This means you can also get NFT images for individual tokens, all tokens within a wallet, and much more.
So, if you have followed along this far, you now know how to get images from NFT collections. From here, you can now use this data to integrate thumbnail previews into your projects and create more compelling user experiences!
If you liked this guide, consider checking out more content here at Moralis. For instance, learn how to write a smart contract in Solidity or read about the best free crypto price API.
Also, did you know that you can access tools like the NFT API, Price API, and Streams API free of charge? All you have to do is sign up for free with Moralis, and you can start building sophisticated Web3 projects in a heartbeat!
