diff --git a/resources/assets/js/components/ImgView.vue b/resources/assets/js/components/ImgView.vue
index d5f817442..3f6a30ba7 100755
--- a/resources/assets/js/components/ImgView.vue
+++ b/resources/assets/js/components/ImgView.vue
@@ -16,7 +16,8 @@ export default {
     computed: {
         srcValue() {
             const {src} = this;
-            if (src.substring(0, 2) === "//" ||
+            if (src.substring(0, 10) === "data:image" ||
+                src.substring(0, 2) === "//" ||
                 src.substring(0, 7) === "http://" ||
                 src.substring(0, 8) === "https://" ||
                 src.substring(0, 6) === "ftp://" ||
diff --git a/resources/assets/js/components/PreviewImage/index.vue b/resources/assets/js/components/PreviewImage/index.vue
index af078c91d..2457392eb 100644
--- a/resources/assets/js/components/PreviewImage/index.vue
+++ b/resources/assets/js/components/PreviewImage/index.vue
@@ -1,9 +1,10 @@
 <template>
     <Modal
         :value="previewImageList.length > 0"
+        :mask="false"
         :mask-closable="false"
         :footer-hide="true"
-        :transition-names="['fade', 'fade']"
+        :transition-names="['', '']"
         fullscreen
         @on-visible-change="visibleChange"
         class-name="common-preview-image">
@@ -55,15 +56,6 @@ import {mapState} from "vuex";
 export default {
     name: 'PreviewImage',
     components: {PreviewImageView},
-
-    data() {
-        return {
-
-        }
-    },
-    mounted() {
-
-    },
     computed: {
         ...mapState([
             'previewImageIndex',
diff --git a/resources/assets/js/components/PreviewImage/view.vue b/resources/assets/js/components/PreviewImage/view.vue
index 1243bbffc..a736150d0 100644
--- a/resources/assets/js/components/PreviewImage/view.vue
+++ b/resources/assets/js/components/PreviewImage/view.vue
@@ -1,10 +1,10 @@
 <template>
-    <div ref="view" class="common-preview-view">
+    <div ref="view" class="common-preview-view no-dark-mode">
         <template v-if="!isSingle">
-            <div class="preview-view-prev" :class="{ 'is-disabled': !infinite && isFirst }">
+            <div class="preview-view-prev" :class="{ 'is-disabled': !infinite && isFirst }" @click="prev">
                 <i class="taskfont">&#xe72d;</i>
             </div>
-            <div class="preview-view-next" :class="{ 'is-disabled': !infinite && isLast }">
+            <div class="preview-view-next" :class="{ 'is-disabled': !infinite && isLast }" @click="next">
                 <i class="taskfont">&#xe733;</i>
             </div>
         </template>
@@ -19,7 +19,7 @@
                 <i class="taskfont" @click="handleActions('clocelise')">&#xe7a6;</i>
             </div>
         </div>
-        <div class="preview-view-canvas">
+        <div class="preview-view-canvas no-dark-mode">
             <img
                 v-for="(url, i) in urlList"
                 v-if="i === index"
@@ -42,6 +42,8 @@
     position: fixed;
     right: 0;
     top: 0;
+    background: rgba(0, 0, 0, .8);
+    backdrop-filter: blur(4px);
 
     .preview-view-prev,
     .preview-view-next {