react 图片预览

图片预览，客户要求要鼠标滚动放大缩小，时间紧急，所以使用插件rc-viewer来实现，gitHub地址：https://github.com/hyk51594176/rc-viewer，由于我的场景是点击文字预览图片，所以不想要缩略图，于是设置样式width:'0',height:'0',overflow:'hidden'

 

import RcViewer from '@hanyk/rc-viewer'

......
previewFile = file => {
    if(this.v){
         this.v.viewer.show()// 点击文字 ‘图片1’ 显示图片
    }
  };
......
<span
     onClick={() => {
     this.previewFile(item);
     }}
     className={styles.preview_text}
     >
     图片1
</span>
........

<div style={{width:'0',height:'0',overflow:'hidden'}}>
              <RcViewer ref={v=>{this.v = v}} options={{navbar:false}}>
                <img id='preImg' alt="图片预览" style={{}} src={previewImage} />
              </RcViewer>
            </div>