NFT Image
A component for displaying NFT images with loading states and fallback handling.
Made by SolDevKit TeamInstallation
Setup
Environment Variables
Add your Alchemy API key to your environment file:
# .env.local (for Next.js) or .env
ALCHEMY_API_KEY=your_alchemy_api_key_hereNext.js Configuration
If you're using Next.js, you need to configure image domains for NFT images. Add the following to your next.config.js or next.config.ts:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'arweave.net',
port: '',
pathname: '/**',
},
{
protocol: 'https',
hostname: '*.arweave.net',
port: '',
pathname: '/**',
},
],
},
};
export default nextConfig;Note: After updating your Next.js configuration, restart your development server for the changes to take effect.
Usage
Basic Usage
import { NFTImage } from "@/components/soldevkit-ui/nft/nft-img";
export default function Example() {
return (
<div className="w-48 h-48">
<NFTImage mintAddress="97jqKJUM87qKmSu5qgengChf2yMSjbDSh8ykyju2W6zh" className="w-full h-full" />
</div>
);
}Features
- Automatic Image Fetching: Fetches NFT metadata and displays the image
- Loading States: Shows loading spinner while fetching metadata
- Fallback Handling: Displays placeholder icon when image is unavailable
- Responsive Design: Adapts to container size with proper aspect ratio
- Lazy Loading: Optimized image loading for better performance
- Error Handling: Graceful fallback for invalid or missing NFTs
Props
Prop
Type
Dependencies
{
"@solana/web3.js": "^1.95.0",
"lucide-react": "^0.400.0"
}Built for the Solana ecosystem. Contributions welcome.
How is this guide?
NFT Card
A component for displaying NFT metadata with image, attributes, and collection information using Alchemy API.
Token Image
A component for displaying token images with loading states and fallback handling using Jupiter's token list.
Built by Aman Satyawani. The source code is available on GitHub.