提交 5a0f4000 编写于 作者: X xiaoyucoding

fix: 修复部分情况下 base64 的图片无法加载的问题

上级 4d725cbf
<template> <template>
<uni-image v-on="$listeners"> <uni-image v-on="$listeners">
<div :style="modeStyle" /> <div ref="content" />
<img :src="realImagePath"> <img :src="realImagePath">
<v-uni-resize-sensor <v-uni-resize-sensor
v-if="mode === 'widthFix'" v-if="mode === 'widthFix'"
ref="sensor" ref="sensor"
@resize="_resize" /> @resize="_resize" />
...@@ -40,8 +40,42 @@ export default { ...@@ -40,8 +40,42 @@ export default {
}, },
realImagePath () { realImagePath () {
return this.$getRealPath(this.src) 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 size = 'auto'
let position = '' let position = ''
let repeat = 'no-repeat' let repeat = 'no-repeat'
...@@ -56,7 +90,7 @@ export default { ...@@ -56,7 +90,7 @@ export default {
position = 'center center' position = 'center center'
break break
case 'widthFix': case 'widthFix':
size = '100% 100%;' size = '100% 100%'
break break
case 'top': case 'top':
position = 'center top' position = 'center top'
...@@ -90,40 +124,10 @@ export default { ...@@ -90,40 +124,10 @@ export default {
position = '0% 0%' position = '0% 0%'
break break
} }
this.$refs.content.style.backgroundImage = `url(${this.realImagePath})`
return `background-image: url("${this.$getRealPath(this.src)}"); background-size:${size};background-position:${position};background-repeat:${repeat};` this.$refs.content.style.backgroundPosition = position
} this.$refs.content.style.backgroundSize = size
}, this.$refs.content.style.backgroundRepeat = 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 () { _loadImage () {
const _self = this const _self = this
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册