DEMO
- Auto show the
loading
or error
status of img
- 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)