記錄安卓與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 顯示就可以了，點擊關閉，組件內已經做了，就可以不用管了

總結

以上是生活随笔為你收集整理的记录安卓与uni-app混合开发遇到的坑——图片预览问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。