- Auto show the
loading
orerror
status ofimg
- Can be previewed by Component
Preview
- Group by props
group
- Loadable by used
IntersectionObserver
Props | Desc | Type | Default |
---|---|---|---|
style | -- | Object | |
className | -- | String | |
width | -- | Number, String | 100 |
height | -- | Number, String | initial |
src | -- | String | |
onClick | -- | Function | |
mask | mask style when img hover | Boolean | true |
group | groupId, used to preview image in same group | String | default |
objectFit | img object-fit style | String | cover |
imgProps | img props | Object | |
preview | can be previewed | Boolean | true |
onDelete | delete icon callback | Function | |
onError | img onerror callback | Function | |
onLoad | img onload callback | Function |
<Image src='1.jpg'/>
<Image src='1.jpg' style={{margin: '10px'}}/>
<Image src='1.jpg' width='120' height='120'/>
<Image src='1.jpg' objectFit='contains'/>
<Image src='1.jpg' imgProps={{alt: 'test', className: 'my-img-class'}}/>
<Image src='1.jpg' group='my-img-group-1'/> // PreviewApi/preview('1.jpg', [ /* group-img-list */ ])
Func | Desc | Params |
---|---|---|
preview | preview a image | image: imgSrc or image index of list, list:Array: Images List |
show | open the previewer | |
hide | close the previewer | |
destroy | destroy the ins |
PreviewApi.preview('1.jpg')
const list = ['1.jpg', '2.jpg', '3.jpg']
// use index
PreviewApi.preview(2, list)
// or use src
PreviewApi.preview('2.jpg', list)