react-img-zooms

Zoom in, zoom out, rotate and move the picture

Usage no npm install needed!

<script type="module">
  import reactImgZooms from 'https://cdn.skypack.dev/react-img-zooms';
</script>

README

使用 React+typescript 的组件库


react实现图片的放大、缩小、旋转及移动功能组件



npm install react-image-zoom --save

使用


// 引入组件
import { ImgZoom } from 'react-image-zoom'

// 代码示例
<ImgZoom
  dataSource={{
    url: 'static/media/example.e6118d8b.png'
  }}
 />

ImgZoom Component

property propType required default description
dataSource object yes { url: '', scale: 1, rotate: 0, translateX: 0, translateY: 0 } 设置 数据源
className string - - 设置 容器的className
showOpt bool - true 是否显示操作按钮