Deprecated: <Image /> has been deprecated. Please use the native HTML
<img /> instead. (this component does not really have any added value)
import { Image } from '@mediahuis/chameleon-react'
<Image src="http://placekitten.com/500/200" alt="cat" />
ReferenceError: Image is not defined
Props
BorderRadius
default: undefined
Change the image's border-radius.
<Image borderRadius={1} src="http://placekitten.com/50/100" alt="cat with border-radius space 1" />
<Image borderRadius={2} src="http://placekitten.com/50/100" alt="cat with border-radius space 2" />
<Image borderRadius={3} src="http://placekitten.com/50/100" alt="cat with border-radius space 3" />
<Image borderRadius="fill" src="http://placekitten.com/50/100" alt="cat with border-radius 50%" />
<Image borderRadius="sides" src="http://placekitten.com/50/100" alt="cat with border-radius 999px" />
ReferenceError: Image is not defined
Height
default: undefined
Change the image's height.
<Image height={5} src="http://placekitten.com/50/100" alt="cat with height space 5" />
<Image height="auto" src="http://placekitten.com/50/100" alt="cat with height auto" />
<Image height="full" src="http://placekitten.com/50/100" alt="cat with height 100%" />
<Image height="300px" src="http://placekitten.com/50/100" alt="cat with height 300px" />
ReferenceError: Image is not defined
MaxHeight
default: undefined
Change the image's max-height.
<Image maxHeight={5} src="http://placekitten.com/50/100" alt="cat with max-height space 5" />
<Image maxHeight="auto" src="http://placekitten.com/50/100" alt="cat with max-height auto" />
<Image maxHeight="full" src="http://placekitten.com/50/100" alt="cat with max-height 100%" />
<Image maxHeight="300px" src="http://placekitten.com/50/100" alt="cat with max-height 300px" />
ReferenceError: Image is not defined
MaxWidth
default: full
You can change the image's max-width. By default it's set to 100%.
<Image src="http://placekitten.com/500/200" maxWidth="auto" alt="cat" />
<Image src="http://placekitten.com/500/200" maxWidth="full" alt="cat" />
ReferenceError: Image is not defined
Width
default: auto
You can change the image's width. By default it's set to auto.
<Image src="http://placekitten.com/500/200" width="auto" alt="cat" />
<Image src="http://placekitten.com/500/200" width="full" alt="cat" />
ReferenceError: Image is not defined
