小程序设置图片高度自适应

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>
相关推荐
久爱@勿忘1 小时前
uniappH5跳转小程序
前端·小程序·uni-app
文慧的科技江湖21 小时前
光储充一体化开源能源管理系统 需求说明书(简单版) - 慧知开源充电桩平台
小程序·开源·能源·光储充·光伏系统·实现光储充全设备统一监控·光储充一体化开源能源管理系统
eric*16881 天前
Mac反编译小程序教程
小程序·小程序反编译
打瞌睡的朱尤1 天前
微信小程序50~75
微信小程序·小程序
weixin_394758031 天前
直播间小程序码生成问题修复代码清单
android·小程序·apache
程序鉴定师2 天前
上海本凡科技解密小程序开发公司的价格构成与市场价值
大数据·小程序
hnxaoli2 天前
win10小程序(十九)鼠标位置记录
python·小程序
IT观测3 天前
# 2026年SaaS小程序制作平台对比:乔拓云、有赞、微盟
小程序
宁夏雨科网3 天前
印刷包装公司开发小程序的优势与内容
小程序·展示小程序·印刷包装·印刷公司小程序
lichenyang4533 天前
从零到一:用 Taro + React 搭建数据采集小程序
react.js·小程序·taro