diff --git a/web_src/package.json b/web_src/package.json
index 13eeeb0e8..02646dc50 100644
--- a/web_src/package.json
+++ b/web_src/package.json
@@ -23,6 +23,8 @@
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
     "url-search-params-polyfill": "^2.0.3",
+    "v-viewer": "1.7.4",
+    "viewerjs": "1.11.6",
     "vue": "^2.6.12",
     "vue-clipboard2": "^0.2.1",
     "vue-i18n": "5.0.3",
diff --git a/web_src/src/components/common/BigImg.vue b/web_src/src/components/common/BigImg.vue
deleted file mode 100644
index ed24eb478..000000000
--- a/web_src/src/components/common/BigImg.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <!-- 过渡动画 -->
-  <transition name="fade">
-    <div class="img-view" @click="bigImg">
-      <!-- 遮罩层 -->
-      <div class="img-layer"></div>
-      <div class="img">
-        <img :src="imgSrc" />
-      </div>
-    </div>
-  </transition>
-</template>
-<script>
-export default {
-  props: ['imgSrc'], // 接受图片地址
-  methods: {
-    bigImg() {
-      // 发送事件
-      this.$emit('clickit')
-    }
-  }
-}
-</script>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  ransition: all 0.2s linear;
-  transform: translate3D(0, 0, 0);
-}
-.fade-enter,
-.fade-leave-active {
-  transform: translate3D(100%, 0, 0);
-}
-/* bigimg */
-.img-view {
-  position: inherit;
-  width: 100%;
-  height: 100%;
-}
-/*遮罩层样式*/
-.img-view .img-layer {
-  position: fixed;
-  z-index: 999;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.7);
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-/*不限制图片大小，实现居中*/
-.img-view .img img {
-  max-width: 100%;
-  max-height: 100%;
-  display: block;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  margin: auto;
-  z-index: 1000;
-}
-</style>
diff --git a/web_src/src/components/common/Editormd.vue b/web_src/src/components/common/Editormd.vue
index 20bbb8aaa..af1c0492a 100644
--- a/web_src/src/components/common/Editormd.vue
+++ b/web_src/src/components/common/Editormd.vue
@@ -1,7 +1,5 @@
 <template>
   <div :id="id" class="main-editor">
-    <!-- 放大图片 -->
-    <BigImg v-if="showImg" @clickit="showImg = false" :imgSrc="imgSrc"></BigImg>
   </div>
 </template>
 <style src="@/../static/editor.md/css/editormd.min.css"></style>
@@ -139,8 +137,9 @@
 
 </style>
 <script>
-import BigImg from '@/components/common/BigImg'
 import { getUserInfoFromStorage } from '@/models/user.js'
+import 'viewerjs/dist/viewer.css'
+import { api as viewerApi } from 'v-viewer'
 if (typeof window !== 'undefined') {
   var $s = require('scriptjs')
 }
@@ -318,12 +317,11 @@ export default {
     }
   },
   components: {
-    BigImg
+    
   },
   data() {
     return {
       instance: null,
-      showImg: false,
       imgSrc: '',
       user_token: '',
       intervalId: 0
@@ -563,8 +561,10 @@ export default {
       // 图片点击放大
       $('#' + this.id + ' img').click(function() {
         var img_url = $(this).attr('src')
-        that.showImg = true // 获取当前图片地址
         that.imgSrc = img_url
+        viewerApi({
+          images: [img_url]
+        })
       })
 
       // 高亮关键字