# Image ## Installation ```bash npm i boundless-image --save ``` Then use it like: ```jsx /** @jsx createElement */ import { createElement, PureComponent } from 'react'; import Button from 'boundless-button'; import Image from 'boundless-image'; export default class ImageDemo extends PureComponent { state = { normal: Date.now(), delayed: Date.now(), error: Date.now(), } remountImage(refName) { this.setState({ [refName]: Date.now() }); } render() { return (
Normal
A snowy drive.
Delayed
An aerial shot of a snow-covered forest.
Errored Out
A dead image.
); } } ``` Image can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { Image } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Image). ### Required Props - __`src`__ · a valid path to the desired image Expects | Default Value --- | --- `string` | `'about:blank'` ### Optional Props - __`*`__ · any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes) Expects | Default Value --- | --- `any` | `n/a` - __`alt`__ · a written description of the image for search engines, hovertext and those using accessibility technologies Expects | Default Value --- | --- `string` | `''` - __`component`__ · overrides the component HTML tag Expects | Default Value --- | --- `string` | `'div'` ## Reference Styles ### Stylus You can see what variables are available to override in [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl). ```stylus // Redefine any variables as desired, e.g: color-accent = royalblue // Bring in the component styles; they will be autoconfigured based on the above @require "node_modules/boundless-image/style" ``` ### CSS If desired, a precompiled plain CSS stylesheet is available for customization at `/build/style.css`, based on Boundless's [default variables](https://github.com/enigma-io/boundless/blob/master/variables.styl).