Image
Display image content.
General
The basic Image usage.
Skeleton
Image will show skeleton animation after width and height props are set.
Browser
Add a browser style wrapper to the image.
Browser Invert
You can apply a color invert with the invert prop.
Compose
Show Image in Display component.
Reduce the possibility of page rendering by setting height
SVG
Render svg strings directly
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 30 30" fill="none">
<path d="M13.5 3.5H14V3.29289L13.8536 3.14645L13.5 3.5ZM10.5 0.5L10.8536 0.146447L10.7071 0H10.5V0.5ZM2.5 6.5V6H2V6.5H2.5ZM2.5 8.5H2V9H2.5V8.5ZM4.5 8.5H5V8H4.5V8.5ZM4.5 10.5V11H5V10.5H4.5ZM6.5 9.5H6V9.70711L6.14645 9.85355L6.5 9.5ZM7.5 10.5L7.14645 10.8536L7.5 11.2071L7.85355 10.8536L7.5 10.5ZM8.5 9.5L8.85355 9.85355L9 9.70711V9.5H8.5ZM10.5 6.5V6H10V6.5H10.5ZM10.5 10.5H10V11H10.5V10.5ZM12.5 10.5V11H13V10.5H12.5ZM2 5V1.5H1V5H2ZM13 3.5V5H14V3.5H13ZM2.5 1H10.5V0H2.5V1ZM10.1464 0.853553L13.1464 3.85355L13.8536 3.14645L10.8536 0.146447L10.1464 0.853553ZM2 1.5C2 1.22386 2.22386 1 2.5 1V0C1.67157 0 1 0.671573 1 1.5H2ZM1 12V13.5H2V12H1ZM2.5 15H12.5V14H2.5V15ZM14 13.5V12H13V13.5H14ZM12.5 15C13.3284 15 14 14.3284 14 13.5H13C13 13.7761 12.7761 14 12.5 14V15ZM1 13.5C1 14.3284 1.67157 15 2.5 15V14C2.22386 14 2 13.7761 2 13.5H1ZM5 6H2.5V7H5V6ZM2 6.5V8.5H3V6.5H2ZM2.5 9H4.5V8H2.5V9ZM4 8.5V10.5H5V8.5H4ZM4.5 10H2V11H4.5V10ZM6 6V9.5H7V6H6ZM6.14645 9.85355L7.14645 10.8536L7.85355 10.1464L6.85355 9.14645L6.14645 9.85355ZM7.85355 10.8536L8.85355 9.85355L8.14645 9.14645L7.14645 10.1464L7.85355 10.8536ZM9 9.5V6H8V9.5H9ZM13 6H10.5V7H13V6ZM10 6.5V10.5H11V6.5H10ZM10.5 11H12.5V10H10.5V11ZM13 10.5V8.5H12V10.5H13Z" fill="gray"/>
</svg>)
APIs
Image.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| src | image src | string | - | - |
| disableSkeleton | disable skeleton animation when loading | boolean | - | false |
| disableAutoResize | disable zooming when width is too small | boolean | - | false |
| maxDelay(ms) | max duration of animation | number | - | 3000 |
| ... | native props | ImgHTMLAttributes | 'alt', 'className', ... | - |
Image.Browser.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| title | show text title (when "url" is unset) | string | - | - |
| url | show url on browser address input | string | - | - |
| showFullLink | show full url | boolean | - | false |
| invert | invert colors | boolean | - | false |
| anchorProps | props of element a | AnchorHTMLAttributes | - | {} |
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
Previous
Icons
Next
Input
MADE & DESIGNED WITHBY BRUNO ANDRADE
