---
name: Image
menu: Components
route: /components/image
---

import { Playground, Props } from 'docz'
import Image from './'

# Image

## Import
`import { Image } from '@blasterjs/core'`

## Basic usage
<Playground>
  <Image
    src="https://via.placeholder.com/150x150"
    alt="A placeholder image"
  />
</Playground>

## Rounded image
<Playground>
  <Image
    src="https://via.placeholder.com/150x150"
    alt="A placeholder image"
    rounded
  />
</Playground>

## Circular image
<Playground>
  <Image
    src="https://via.placeholder.com/150x150"
    alt="A placeholder image"
    circle
  />
</Playground>


## PropTypes
Accepts standard html `<img>` attributes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| src | string | yes | | |
| alt | string | yes | | |
| rounded | bool | no | false | |
| circle | bool | no | false | overrides rounded |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |
| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  radii: {
    rounded
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/image)
- [Learn more about themeing](/blaster-theme)