记Viewer.js使用（文档内图片点击放大）

最新推荐文章于 2026-04-29 14:27:08 发布

翻译最新推荐文章于 2026-04-29 14:27:08 发布 · 1.7k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了一个基于ViewerJS的图片预览组件实现，通过在markdown生成的html中加入此组件，可以实现点击图片放大的效果，类似于掘金等网站的图片预览功能。组件通过import引入，并在React类组件中实例化，提供了包括更新、缩放等功能。

先奉上GitHub：https://github.com/fengyuanchen/viewerjs

演示地址：https://fengyuanchen.github.io/viewerjs/

注：代码中参数不一一讲解请点击上面链接查看详细说明

笔者使用场景： markdown生成的html 点击图片有放大效果类似掘金等网站的效果

import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';



class WikiPage extends Component {
    ...


 getImg = ()=>{
    if(this.viewer){ //判断是否已经实例 是则销毁 以免切换路由导致图片无法更新
      this.viewer.destroy();
    }
    this.viewer = new Viewer(document.getElementById('scroll'), {
      show (){
        this.viewer.update();
      },
      viewed() {
        this.viewer.zoom(0)
      },
      container: 'body',
      toolbar: false,
      navbar: false,
      movable: false
    });
  }

    ...

    render(){
        return(

            ...
                <div
                  className="tui-editor-contents"
                  id="scroll"
                  dangerouslySetInnerHTML={{ __html: desc }}
                />
                </div>
            ...

        )
     }
}