Image

Use images having different sizes, shapes and borders.

Examples

Images can be displayed using the src prop.

• Note: To change the dimensions of the image, use the width and height props. By default the width and height of the image is 100%

import { Image } from 'chic-ui';

<Image src='cat1.png' width='160px' height='130px' />
<Image src='cat2.png' width='160px' height='130px' />

Shape and Border

The shape of the images can be changed using the rounded and circle props.

Give a cute white outline to the image using the outline prop.

import { Image } from 'chic-ui';

<Image src='cat1.png' width='160px' height='130px' rounded />
<Image src='cat2.png' width='160px' height='130px' circle />
<Image src='cat3.png' width='160px' height='130px' outline />

API

import { Image } from 'chic-ui';

Name	Type	Default	Description
src (required)	string		Path of the image
width	string	'100%'	Width of the image
height	string	'100%'	Height of the image
rounded	boolean	false	Sets image shape as rounded
circle	boolean	false	Sets image shape as circle
outline	boolean	false	Provides white borders to the image
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component