uniapp项目不支持img标签,只能用image标签,用image标签浏览器就会在外面解析出一层uni-image包在img外面,这样就会影响写样式,导致图片高度不能自适应,所以就拿原有图片的宽高,用rpx单位
javascript
<template>
<!-- 图片 -->
<view style="height: 100%;width: 100%;" v-if="dataListconfiguration.scheduleType == 2">
<image :style="{
width: width,
height: height,
}" class="img" :src="dataListconfiguration.scheduleContent" ></image>
</view>
</template>
<script>
export default {
data() {
return {
dataListconfiguration:uni.getStorageSync('dataListconfiguration'),
width: "",
height: "",
}
},
onShow() {
// 设置标题
wx.setNavigationBarTitle({
title: this.$t('schedule.index'),
})
// 设置图片高度
let that = this
if(this.dataListconfiguration&&this.dataListconfiguration.scheduleType == 2){
uni.getImageInfo({
src: this.dataListconfiguration.scheduleContent,
success: (image) => {
that.width = image.width + "rpx";
that.height = image.height + "rpx";
},
});
}
}
}
</script>
<style scoped lang="scss">
.img{
max-width: 100%;
}
</style>