react点击按钮预览图片rc-viewer

最新推荐文章于 2023-02-10 17:01:26 发布

你亦老

最新推荐文章于 2023-02-10 17:01:26 发布

阅读量763

点赞数

文章标签： p2p linq gnu

本文链接：https://blog.csdn.net/weixin_57229715/article/details/123223653

版权

import RcViewer from '@hanyk/rc-viewer';  


  getData = async souceId => {
      // 获取图片src 
    const res = await reqFileIds(souceId);
 
    this.setState({
      srcList: res.data && res.data.map(el => fileDocDownloadPath + el.bh),
    });
    this.viewer.viewer.show();
  };  

      <div className="text-primary pointer" onClick={() => this.getData(text)}>
        点击查看
      </div>   

<RcViewer ref={el => (this.viewer = el)} style={{ display: 'none' }}>
     <ul id="images">
         {this.state.srcList.map(el => (
        <li>
      <img src={el} alt="Picture 1" />
      </li>
     ))}
   </ul>
 </RcViewer>

参考

基于react和rc-viewer封装一个图片预览组件 - 简书