Image
File to import
import { Image } from "tsx-library-julseb"Auto height
<Image
src="https://images.unsplash.com/photo-1643028468604-858ea2a9c111?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80"
alt="Image"
borderRadius="xxl"
/>Fixed height with caption
<Image
src="https://images.unsplash.com/photo-1643028468604-858ea2a9c111?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80"
alt="Image"
height={300}
fit="cover"
caption="Caption"
/>Props
as
Changes the HTML tag
Type: string
Possible values: Any HTML tag
Default value: img
src
This prop is required.Type: string
alt
This prop is required.Type: string
width
Type: number or string
Default value: 100%
height
Type: number or string
Default value: auto
fit
Type: string
Possible values: contain | cover | fill | none | scale-down | inherit | initial | revert | revert-layer | unset
borderRadius
Type: string, number or object
Possible values: xxl | xl | l | m | s | xs | round | circle | none | any number | object
borderRadius object
topLeft
Type: string or number
Possible values: xxl | xl | l | m | s | xs | round | circle | none | any number
topRight
Type: string or number
Possible values: xxl | xl | l | m | s | xs | round | circle | none | any number
bottomRight
Type: string or number
Possible values: xxl | xl | l | m | s | xs | round | circle | none | any number
bottomLeft
Type: string or number
Possible values: xxl | xl | l | m | s | xs | round | circle | none | any number
caption
Type: string or object
caption object
text
This prop is required only if you want to add a caption.
Type: string
background
Type: string
Possible values: black | white
Default value: black
asContainer
Changes the HTML tag for the Image container used with the caption
Type: string
Possible values: Any HTML tag
Default value: figcaption