uniapp微信小程序如何动态设置图片的高度和宽度

最新推荐文章于 2024-08-26 15:24:23 发布

南北极之间

最新推荐文章于 2024-08-26 15:24:23 发布

阅读量3.4k

点赞数 1

分类专栏：小程序文章标签：微信小程序前端 vue.js uniapp 小程序

本文链接：https://blog.csdn.net/qq_22182989/article/details/124827286

版权

小程序专栏收录该内容

49 篇文章 4 订阅

订阅专栏

本文介绍如何使用uni-app的Image组件通过设置mode为'aspectFit'并监听宽度变化，实现图片的自适应布局。提供了完整代码示例和关键数据配置，适合前端开发者了解移动端图片展示的最佳实践。

摘要由CSDN通过智能技术生成

官网：

image | uni-app官网https://uniapp.dcloud.io/component/image.html#image

思路：可以通过设置mode+监听宽高来实现

代码：

   <image
              class="image"
              v-if="bookimg"
              :style="{width:previewWidth + '%'}"
              :src="ossBaseUrl + bookimg"
              mode="aspectFit"></image>

data：
previewWidth: null, // 预览宽度，默认60%

完整的实例代码：