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

最新推荐文章于 2025-03-28 14:38:20 发布

你亦老

最新推荐文章于 2025-03-28 14:38:20 发布

阅读量898

点赞数

文章标签： p2p linq gnu

本文链接：https://blog.youkuaiyun.com/weixin_57229715/article/details/123223653

版权

本文介绍了如何使用React和rc-viewer库创建一个可点击查看图片的组件，通过异步加载图片并展示在预览器中，适合前端开发者快速集成图片预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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封装一个图片预览组件 - 简书