当前位置:   article > 正文

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

小程序图片高度自适应

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

  1. <template>
  2. <!-- 图片 -->
  3. <view style="height: 100%;width: 100%;" v-if="dataListconfiguration.scheduleType == 2">
  4. <image :style="{
  5. width: width,
  6. height: height,
  7. }" class="img" :src="dataListconfiguration.scheduleContent" ></image>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. dataListconfiguration:uni.getStorageSync('dataListconfiguration'),
  15. width: "",
  16. height: "",
  17. }
  18. },
  19. onShow() {
  20. // 设置标题
  21. wx.setNavigationBarTitle({
  22. title: this.$t('schedule.index'),
  23. })
  24. // 设置图片高度
  25. let that = this
  26. if(this.dataListconfiguration&&this.dataListconfiguration.scheduleType == 2){
  27. uni.getImageInfo({
  28. src: this.dataListconfiguration.scheduleContent,
  29. success: (image) => {
  30. that.width = image.width + "rpx";
  31. that.height = image.height + "rpx";
  32. },
  33. });
  34. }
  35. }
  36. }
  37. </script>
  38. <style scoped lang="scss">
  39. .img{
  40. max-width: 100%;
  41. }
  42. </style>

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号