From b64ad52c32b3c9558bb98705713bcd33ddc8b275 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Mon, 11 Mar 2019 19:39:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20src=20=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E6=97=B6=E6=9C=AA=E5=90=8C=E6=AD=A5=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20url=20=E7=9A=84=E9=97=AE=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 | 82 ++++++++++++------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/core/view/components/image/index.vue b/src/core/view/components/image/index.vue
index b1b44b7cd..08cd2c416 100644
--- a/src/core/view/components/image/index.vue
+++ b/src/core/view/components/image/index.vue
@@ -1,6 +1,8 @@
 <template>
   <uni-image v-on="$listeners">
-    <div ref="content" />
+    <div
+      ref="content"
+      :style="modeStyle" />
     <img :src="realImagePath">
     <v-uni-resize-sensor
       v-if="mode === 'widthFix'"
@@ -40,42 +42,8 @@ export default {
     },
     realImagePath () {
       return this.$getRealPath(this.src)
-    }
-  },
-  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()
-      }
-      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 () {
+    modeStyle () {
       let size = 'auto'
       let position = ''
       let repeat = 'no-repeat'
@@ -124,12 +92,44 @@ export default {
           position = '0% 0%'
           break
       }
-      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
+
+      return `background-position:${position};background-size:${size};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
+      }
     },
     _loadImage () {
+      this.$refs.content.style.backgroundImage = `url(${this.realImagePath})`
+
       const _self = this
       const img = new Image()
       img.onload = function ($event) {
@@ -150,7 +150,7 @@ export default {
           errMsg: `GET ${_self.src} 404 (Not Found)`
         })
       }
-      img.src = this.$getRealPath(this.src)
+      img.src = this.realImagePath
     },
     _getWidth () {
       const computedStyle = window.getComputedStyle(this.$el)
-- 
GitLab