Introduction
Previously, we covered creating a simple contract that stored entries in a table of who owned a cat with a name. As we make more complicated and robust NFTs, we are going to want to associate images with our NFTs.
We could store images in the traditional manner of hosting the image via an HTTP accessible location, and then embed that HTTP link in the NFT table entry. But, if the webserver housing the image goes down, now the link is inaccessible and so is the image.
To decentralize our images for our NFTs, we are going to do a quick dive into IFPS.
What is IPFS
We want our NFTs to live on the blockchain, but the images for the NFTs are typically too large to host on the blockchain in a cost efficient manner. What is done instead is that a reference to the image is stored on the blockchain instead. You may see some NFTs using HTTP URLs for their images, but as we all know from broken links on the web, these can suffer from [link-rot](https://en.wikipedia.org/wiki/Link_rot#:~:text=Link%20rot%20(also%20called%20link,address%20or%20becoming%20permanently%20unavailable.).
Instead we can use IPFS - InterPlanetary File System - to store and retrieve files. IPFS is a decentralized protocol where instead of relying on centralized servers, IPFS allows users to store and retrieve files by their content, using a unique Content ID (CID).
Our Images
For the example NFT that we will implement in upcoming sections, we will need a few images: the collection image, and images for our NFTs. We are going to implement an example NFT called “BabyChicks”, so we will need an image for the egg, and images for each type of baby chick.
Collection image:
Egg:
Baby Chick Common:
Baby Chick Rare:
Baby Chick Legendary:
Uploading to IPFS
To get started with uploading and viewing IPFS files, we will use a GUI Desktop app. The one I will use is https://docs.ipfs.tech/install/ipfs-desktop/. Once installed, run the application.
Head on over to the Files tab. We will create a folder to group all of our images together:
Next we upload all of our files
For each file, we also click the “Pin to local node” button, to ensure that our local node will always have a reference to the file.
The last thing I like to do to ensure that a public gateway picks up the IFPS file hash is to right click each image, go to “Inspect”, and then in this screen click “View on Public Gateway”:
This helps the public gateways pick up on your new image.
Referencing IPFS Files
You can reference these files one of two ways:
When you right click any file, you will see a Share Link which by default will give you a link to using https://ipfs.io/ipfs as the IPFS public gateway.
Otherwise, you can share the CID of your file. When we define our NFTs, anytime an image string is expected, we will use our CIDs.
Dark Emblem Images
If you look at Dark Emblem on AtomicHub, you’ll notice we don’t use IPFS, and instead rely on traditional HTTP links for images. This is because in Dark Emblem, we generate a new, unique image every time a pack is unboxed and a Card NFT is minted.
When you go to implement your on NFT game, you’ll want to think about these decisions. There are pros and cons to each decision you make. In the case of Dark Emblem, we wanted to the simplicity of being able to mint new unique images based on random card traits that are generated on the blockchain. Your NFT may be simpler and easier to implement by pre-generating all the images and uploading to IPFS.
Conclusion
In this last section, we went over what IPFS was, how to upload files to our local node, and get those file hashes to be discovered by a public gateway. We also went over the pros and cons of this approach when dealing with different types of NFT minting.
In the next section, we’ll start to look at AtomicHub and AtomicAssets in order to create NFTs that are part of a larger ecosystem on the WAX blockchain.
Next post: Introduction to AtomicAssets
E-book
Get this entire WAX tutorial as an e-book on Amazon.
Additional links
- Github: https://github.com/CapsuleCat/wax-nft-tutorial/tree/main/simplenft
- Documentation: https://docs.ipfs.tech/install/ipfs-desktop/
- Further reading: https://docs.ipfs.tech/concepts/
- Photo by Li Zhang on Unsplash
Top comments (0)