From 36a673a01016d267734477938faba84f5df8e7a0 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Mon, 4 Jan 2021 09:52:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96image-preview=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImagePreview/index.vue         | 13 ++++++-------
 src/views/component_example/image.preview.vue |  8 ++++++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 5374950e..defdc263 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -1,11 +1,9 @@
 <template>
-    <div>
-        <el-image class="img" :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
-            <div slot="error" class="image-slot">
-                <svg-icon name="image-load-fail" />
-            </div>
-        </el-image>
-    </div>
+    <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
+        <div slot="error" class="image-slot">
+            <svg-icon name="image-load-fail" />
+        </div>
+    </el-image>
 </template>
 
 <script>
@@ -48,6 +46,7 @@ export default {
 .el-image {
     border-radius: 5px;
     background-color: #ebeef5;
+    box-shadow: 0 0 5px 1px #ccc;
     ::v-deep .el-image__inner {
         transition: all 0.3s;
         cursor: pointer;
diff --git a/src/views/component_example/image.preview.vue b/src/views/component_example/image.preview.vue
index e9d09ecb..d1bac4e3 100644
--- a/src/views/component_example/image.preview.vue
+++ b/src/views/component_example/image.preview.vue
@@ -2,8 +2,12 @@
     <div>
         <page-header title="图片预览" content="ImagePreview" />
         <page-main>
-            <image-preview src="https://s1.ax1x.com/2020/07/03/NOeqld.jpg" :width="200" />
-            <image-preview src="" width="100px" height="100px" />
+            <div>
+                <image-preview src="https://s1.ax1x.com/2020/07/03/NOeqld.jpg" :width="200" />
+            </div>
+            <div>
+                <image-preview src="" width="100px" height="100px" />
+            </div>
         </page-main>
     </div>
 </template>