一个图片播放器,用于播放单图或多图,多图时支持左右切换。
npm install @x-edu/image-player
import React from 'react'
import ImagePlayer from '@x-edu/image-player'
export default function Demo() {
const data1 = [
'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_01.png'
]
const data2 = [
'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_01.png',
'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_32.png'
]
return (
<div className="demo">
<h2>单图展示</h2>
<ImagePlayer data={data1} />
<br />
<h2>多图展示</h2>
<ImagePlayer data={data2} />
</div>
)
}
.demo {
width: 100%;
/* 使播放器在页面中居中显示 */
max-width: 1000px;
margin: 0 auto;
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 自定义类名 | string | - |
style | 自定义行内样式 | React.CSSProperties | - |
data | 数据源,图片地址数组 | Array | - |
imgSize | 图片大小,可选值:1080, 720, 480, 360, 240(影响图片质量,默认使用原图) | number | - |
showPageNo | 是否显示底部页码 | boolean | true |
onError | 图片加载失败时的回调函数 | (e) => {} | - |
注:播放器默认最大宽度为 1000px,如需调整,请使用自定义样式。