记录安卓与uni-app混合开发遇到的坑——图片预览问题
一、场景描述
用uni-app开发嵌套在安卓里面使用
二、需求描述
点击图片实现,预览、以及放大缩小拖拽功能(第一反应就是使用uni.previewImage)
三、问题描述
使用uni-app 中的uni.previewImage预览图片,在浏览器正常,但是打包到app 显示不出来,一般如果图片路径有问题,最起码会出现黑色背景,图片加载中,或加载失败的情况,但是app 点击图片,直接显示空白,有大神遇到过这个问题吗?
四、问题解决方式
为了解决以上问题,决定使用 movable-area + movable-view 结合实现该功能(本身这个组件就可以实现放大缩小以及拖拽),样式设置 外层盒子 100vw * 100vh,但是放到app上以后,图片显示不全,全屏的背景色也没有显示,后猜想可能是 高度问题,所以不使用 100vh 而使用 rpx或者px 的 实际高度后,图片能正常预览了
五、奉上代码(组件)
<template>
<view class="box" v-if="preview">
<movable-area scale-area class="movable-area" @click.stop="preview=false">
<movable-view class="movable-view" direction="all" scale="true"
scale-min="1" scale-max="4" :scale-value="scale">
//为啥使用img, 因为发现使用image 图片显示不了(传入的图片地址没有域名,只有域名后面的部分)
<img class="img" :src="src" mode="widthFix"></img>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
name: 'PreviewPic',
props: {
src: {
type: String,
required: true
}
},
data() {
return {
scale: 1,
current: '',
preview: false,
};
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.box{
position: fixed;
z-index: 99999;
left: 0;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 800px;
background-color: #000;
}
.movable-area {
width: 100vw;
height: 800px;
}
.movable-view {
width: 100vw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img{
width: 100%;
}
</style>
使用时,引入组件,点击图片传入src,控制 组件内 preview 显示就可以了,点击关闭,组件内已经做了,就可以不用管了