Img3

<Img3 /> is a fundamental components for Web3 Apps. It extends HTML <img /> with Web3 decentralization storage, like IPFS. With <Img3 /> you can put ipfs:// in the src and render the image from IPFS with the fastest gateway. Will support ar soon.

Features

Supports the ipfs:// protocol.
Automatically uses the gateway with the highest speed, And reuse it the next request.

const defaultGateways = [
  'https://nftstorage.link/ipfs/',
  'https://ipfs-gateway.cloud/ipfs/',
  'https://gateway.pinata.cloud/ipfs/',
  'https://4everland.io/ipfs/',
];

Usage

import { Img3 } from '@lxdao/img3';

Props

Prop	Type	Description	Default
src	`string`	image source, support `ipfs://` protocol
alt	`string`	image alt text
gateways	`string[]`	Web3 decentralization storage gateways	defaultGateways
timeout	`number`	timeout of gateway request	`2000`
icon	`Icon`	style of loading or error icons	`{size: 30, color: '#c0c0c0'}`

Img3Provider

@lxdao/img3 provides an Img3Provider provider component that should be used to wrap around your components.

Img3Provider's responsibility is to pass the default gateway value to all of the <Img3 /> components in your application. Usually, your application only needs one provider. You should place it as high as possible in your React tree.

Prop	Type	Description	Default
defaultGateways	`string[]`	Web3 decentralization storage gateways

import React from 'react';
import { Img3Provider } from '@lxdao/img3';
 
export default function Demo() {
  return (
    <Img3Provider defaultGateways={["https://nftstorage.link/ipfs/"]}>
      <YourApp />
    </Img3Provider>
  );
}

Types reference

Icon

type Icon = {
  /** icon size. */
  size?: number;
  /** icon color. */
  color?: string;
  /** error icon size. */
  errorSize?: number;
  /** error icon color. */
  errorColor?: string;
};

Examples

Basic

Like <img /> tag, set the src to render the image.

Initializing...

IPFS protocol

ipfs:// protocol will be automatically replaced with the fastest gateway.

Initializing...

Overwrite gateways

You can overwrite the default gateways, will be used in the request, and the fastest gateway will be cached.

Initializing...

Uploader3