BitcoinImage

Image component that handles Bitcoin URLs with automatic resolution and fallbacks

Image component that handles Bitcoin URLs (b://, ord://, etc.) with automatic resolution and graceful fallbacks.

Installation

npx bigblocks add bitcoin-image

Import

import { BitcoinImage } from 'bigblocks';

API Reference

Prop	Type	Default	Description
src	`string`	-	Image source - can be blockchain URL (b://, ord://, etc.) or regular URL
alt*	`string`	-	Alt text for accessibility
style	`React.CSSProperties`	-	Additional styles to apply to the image
fallback	`React.ReactNode`	-	Fallback content when image fails to load
showLoading	`boolean`	`false`	Show loading state
timeout	`number`	`5000`	Timeout for image loading (ms)

* Required props

Examples

Basic Usage

Simple image display with Bitcoin URL support.

<BitcoinImage
  src="https://api.dicebear.com/7.x/avataaars/svg?seed=bitcoin"
  alt="Bitcoin Avatar"
  style={{ width: '12em', height: '12em', borderRadius: '50%' }}
/>

Bitcoin URLs

Automatically resolves Bitcoin protocol URLs.

<Flex gap="4">
  <BitcoinImage
    src="b://abc123def456..."
    alt="On-chain Image"
    style={{ width: '12em', height: '12em', borderRadius: '50%' }}
    showLoading={true}
  />
  
  <BitcoinImage
    src="ord://inscription_id"
    alt="Ordinal Image"
    style={{ width: '12em', height: '12em', borderRadius: '50%' }}
    showLoading={true}
    timeout={10000}
  />
</Flex>

Different Sizes

Use CSS styles to control sizing.

<Flex gap="4" align="center">
  <BitcoinImage
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=small"
    alt="Small Avatar"
    style={{ width: '3em', height: '3em', borderRadius: '50%' }}
  />
  
  <BitcoinImage
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=medium"
    alt="Medium Avatar"
    style={{ width: '6em', height: '6em', borderRadius: '50%' }}
  />
  
  <BitcoinImage
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=large"
    alt="Large Avatar"
    style={{ width: '12em', height: '12em', borderRadius: '50%' }}
  />
</Flex>

With Fallback

Provide fallback content for failed loads.

<Flex gap="4">
  <BitcoinImage
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=valid"
    alt="Valid Image"
    style={{ width: '12em', height: '12em', borderRadius: '50%' }}
  />
  
  <BitcoinImage
    src="invalid-url"
    alt="Invalid Image"
    style={{ width: '12em', height: '12em', borderRadius: '50%' }}
    fallback={<div style={{ 
      width: '12em', 
      height: '12em', 
      borderRadius: '50%',
      backgroundColor: '#f3f4f6',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      Failed
    </div>}
  />
</Flex>

Loading State

Show loading indicator for slow Bitcoin URL resolution.

<BitcoinImage
  src="b://slow-resolving-hash..."
  alt="Loading Image"
  style={{ width: '12em', height: '12em', borderRadius: '50%' }}
  showLoading={true}
  timeout={15000}
/>

Rectangular Images

Not limited to circular avatars - works with any image format.

<Flex gap="4" direction="column">
  <BitcoinImage
    src="https://images.unsplash.com/photo-1518546305927-5a555bb7020d?w=400&h=200&fit=crop"
    alt="Landscape Image"
    style={{ width: '20em', height: '10em', borderRadius: '8px' }}
  />
  
  <BitcoinImage
    src="https://images.unsplash.com/photo-1614680376739-414d95ff43df?w=300&h=400&fit=crop"
    alt="Portrait Image"
    style={{ width: '12em', height: '16em', borderRadius: '8px' }}
  />
</Flex>

BitcoinAvatar - Avatar component with Bitcoin URL support
ProfilePopover - Profile preview with image display

BitcoinImage

On this page