From 5a0f400053a6e967420f612b85ee4b64147485d3 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Mon, 11 Mar 2019 17:46:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=83=85=E5=86=B5=E4=B8=8B=20base64=20=E7=9A=84=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=97=A0=E6=B3=95=E5=8A=A0=E8=BD=BD=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/view/components/image/index.vue | 80 +++++++++++++-----------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/core/view/components/image/index.vue b/src/core/view/components/image/index.vue
index f1e9ba6bb..b1b44b7cd 100644
--- a/src/core/view/components/image/index.vue
+++ b/src/core/view/components/image/index.vue
@@ -1,8 +1,8 @@
 <template>
   <uni-image v-on="$listeners">
-    <div :style="modeStyle" />
+    <div ref="content" />
     <img :src="realImagePath">
-    <v-uni-resize-sensor
+    <v-uni-resize-sensor
       v-if="mode === 'widthFix'"
       ref="sensor"
       @resize="_resize" />
@@ -40,8 +40,42 @@ export default {
     },
     realImagePath () {
       return this.$getRealPath(this.src)
+    }
+  },
+  watch: {
+    src (newValue, oldValue) {
+      this._loadImage()
     },
-    modeStyle () {
+    mode (newValue, oldValue) {
+      if (oldValue === 'widthFix') {
+        this.$el.style.height = this.availHeight
+        this.sizeFixed = false
+      }
+      if (newValue === 'widthFix' && this.ratio) {
+        this._fixSize()
+      }
+      this._computeModeStyle()
+    }
+  },
+  mounted () {
+    this._computeModeStyle()
+    this.availHeight = this.$el.style.height || ''
+    this._loadImage()
+  },
+  methods: {
+    _resize () {
+      if (this.mode === 'widthFix' && !this.sizeFixed) {
+        this._fixSize()
+      }
+    },
+    _fixSize () {
+      const elWidth = this._getWidth()
+      if (elWidth) {
+        this.$el.style.height = elWidth / this.ratio + 'px'
+        this.sizeFixed = true
+      }
+    },
+    _computeModeStyle () {
       let size = 'auto'
       let position = ''
       let repeat = 'no-repeat'
@@ -56,7 +90,7 @@ export default {
           position = 'center center'
           break
         case 'widthFix':
-          size = '100% 100%;'
+          size = '100% 100%'
           break
         case 'top':
           position = 'center top'
@@ -90,40 +124,10 @@ export default {
           position = '0% 0%'
           break
       }
-
-      return `background-image: url("${this.$getRealPath(this.src)}"); background-size:${size};background-position:${position};background-repeat:${repeat};`
-    }
-  },
-  watch: {
-    src (newValue, oldValue) {
-      this._loadImage()
-    },
-    mode (newValue, oldValue) {
-      if (oldValue === 'widthFix') {
-        this.$el.style.height = this.availHeight
-        this.sizeFixed = false
-      }
-      if (newValue === 'widthFix' && this.ratio) {
-        this._fixSize()
-      }
-    }
-  },
-  mounted () {
-    this.availHeight = this.$el.style.height || ''
-    this._loadImage()
-  },
-  methods: {
-    _resize () {
-      if (this.mode === 'widthFix' && !this.sizeFixed) {
-        this._fixSize()
-      }
-    },
-    _fixSize () {
-      const elWidth = this._getWidth()
-      if (elWidth) {
-        this.$el.style.height = elWidth / this.ratio + 'px'
-        this.sizeFixed = true
-      }
+      this.$refs.content.style.backgroundImage = `url(${this.realImagePath})`
+      this.$refs.content.style.backgroundPosition = position
+      this.$refs.content.style.backgroundSize = size
+      this.$refs.content.style.backgroundRepeat = repeat
     },
     _loadImage () {
       const _self = this
-- 
GitLab