uView使用Album 相册时,单张图片不显示问题
html部分
<!-- 图片预览 -->
<view class="imgView" style="display:flex;" v-if="imgData.length">
<u-album :urls="imgData" singleSize="28vw" multipleSize="28vw" space="3vw"></u-album>
</view>
js部分
export default {
data(){
return{
imgData:[]
}
},
created(){
//模拟请求
setTimeout(()=>{
let res = ['https://xxx.jpg']
this.imgData = res
})
},
}
上述代码为当图片数组只有一张图片时,Album 相册组件不会显示图片,原因是它把图片宽高都设置为0了,百思不得其解,请知道的兄弟告知原因,感谢!
情况如图:
我的解决方法是:再往数组添加一个空元素
export default {
...
created(){
//模拟请求
setTimeout(()=>{
let res = ['https://xxx.jpg']
this.imgData = res
this.imgData.push('')
})
},
}
这样就正常显示了
但是当预览的时候还是有问题的,第二张图片一直在加载(因为是空元素)
另一种方法:
至此我找到另一种方法代替,也实现了这个效果!
<view class="imgView" style="display:flex;" v-if="img.length">
<u-row gutter="10">
<u-col v-for="(item, index) in img" :key="index" :span="3" @click="previewImage(index)">
<u-image :src="item" width="72" height="72" lazy-load></u-image>
</u-col>
</u-row>
</view>
methods:{
previewImage(current) {
uni.previewImage({
current,
urls: this.img
})
},
}
这样就比较完美的解决了图片预览的问题