react中用react-photo-view实现点击图片，图片放大可移动拉拽的效果

深碍√TFBOYSˉ_ 2022-12-10 07:16 471阅读 0赞

1.  下载插件

yarn add react-photo-view

1.  引入插件及样式

import {  PhotoProvider, PhotoSlider } from 'react-photo-view';
    import 'react-photo-view/dist/index.css';

1.  使用插件

<div className="img" onClick={ () => setFlag(true)}>
                <PhotoProvider>
                  <PhotoSlider
                    photoClosable
                    bannerVisible={ false}
                    images={ [{  src: totalInfo.url }]}
                    visible={ flag}
                    onClose={ () => setFlag(false)}
                    index={ photoIndex}
                    onIndexChange={ setPhotoIndex}
                  />
                </PhotoProvider>
                
                <img
                  alt=""
                  src={ totalInfo && totalInfo.url}
                  style={ {  width: `${ 100}%`, height: `${ 100}%` }}
                />
              </div>

1.  图片效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70_pic_center]  
    详情可前往npm查看  
    [https://www.npmjs.com/package/react-photo-view?activeTab=readme][https_www.npmjs.com_package_react-photo-view_activeTab_readme]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fee1323495844b5f9f346f0790d1d814.png
[https_www.npmjs.com_package_react-photo-view_activeTab_readme]: https://www.npmjs.com/package/react-photo-view?activeTab=readme

发表评论取消回复

表情：

评论列表（有 0 条评论，471人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 实现点击图片放大

作者QQ：1095737364 QQ群：123300273 欢迎加入！ 1.建立子组件,来实现图片方法功能: BigImg.vue <templa

分手后的思念是犯贱/ 2023年06月03日 04:58/ 0 赞/ 28 阅读

相关 react中用react-photo-view实现点击图片，图片放大可移动拉拽的效果

1. 下载插件 yarn add react-photo-view 1. 引入插件及样式 import { PhotoProvider, Photo

深碍√TFBOYSˉ_/ 2022年12月10日 07:16/ 0 赞/ 472 阅读

相关 vue实现点击图片放大显示功能

[https://blog.csdn.net/qq348843576/article/details/103261567][https_blog.csdn.net_qq3488

ゝ一纸荒年。/ 2022年11月17日 13:53/ 0 赞/ 358 阅读

相关 js点击图片放大效果ImageZoom代码下载

原文：[js点击图片放大效果ImageZoom代码下载][js_ImageZoom] 源代码下载地址：[http://www.zuidaima.com/share/17957

╰+攻爆jí腚メ/ 2022年08月22日 15:18/ 0 赞/ 403 阅读

相关 jQuery实现图片的放大以及点击图片，放大图片出现在弹出层。

又学习了一个小demo，并运用到了后台的管理系统中。直接上代码吧 <div class="img-list-box"> <div class="

水深无声/ 2022年05月21日 11:55/ 0 赞/ 508 阅读

相关实现点击单张图片,鼠标移动上去,两种状态下可放大

实现点击单张图片时要求可放大 1.官网jquery压缩版引用地址: 　3.1.1版本: 　　<script src="https://code.jquery.c

╰半橙微兮°/ 2022年05月20日 01:16/ 0 赞/ 240 阅读

相关 Android浏览图片，点击放大至全屏效果

最近做一个项目类似于QQ空间，做到照片浏览的功能，对于QQ空间中点击图片放大至全屏，感觉效果很赞，于是也做了个类似的效果。如下。 ![201405102301501

￡神魔★判官ぃ/ 2022年05月13日 03:04/ 0 赞/ 493 阅读

相关 react 实现点击放大效果

(一)简单的点击放大demo1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

小鱼儿/ 2022年04月22日 21:14/ 0 赞/ 993 阅读

相关点击图片放大功能

点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js zoomify图片放大预览插件的github地址为： [https://

怼烎@/ 2022年04月17日 02:45/ 0 赞/ 450 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 595 阅读