Image

Images provide visual stimulation to users and help provide context for the content around them.

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import { Image } from 'furl-components';

ReactDOM.render(
  <Image
    src="./goat-image.jpg"
    alt="A happy goat"
    withCaption
    height={400}
  />, 
  document.getElementById('root')
);

API

Notes

• It is highly recommended you specify a descriptive value for alt to make your image accessible to screen-readers. This is why we already provide a default value instead of using an empty string or undefined.
• If you provide withCaption, the component will render a <figure> and a <figcaption> accompanying the <img> element. The value of alt will be used for the <figcaption>.
• width and height accept any valid CSS value, including CSS variables.