赞
踩
uniapp项目不支持img标签,只能用image标签,用image标签浏览器就会在外面解析出一层uni-image包在img外面,这样就会影响写样式,导致图片高度不能自适应,所以就拿原有图片的宽高,用rpx单位
- <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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。