View Source

Image

An image block with placeholder support for loading and fallback scenarios.

Installation#

npm i --save boundless-image

Image can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Image } from 'boundless';

Demo

Normal
Delayed
Errored Out
Show Implementation

Props#

Required Props#

NameImplementationDescription
src
Expects
string
Default Value
'about:blank'

a valid path to the desired image

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

alt
Expects
string
Default Value
''

a written description of the image for search engines, hovertext and those using accessibility technologies

component
Expects
string
Default Value
'div'

overrides the component HTML tag