- 可以使用本地图片:
/assets/tabbar/1.jpg
, /
表示根目录
- 可以使用网络图片
- 图片的固定大小是
320*240
,不做设置的话会被拉伸
mode
属性可以设置图片显示的位置,例 mode = "top right"
表示显示图片的右上角, mode = "aspectFill"
显示图片中间, mode = "aspectFit"
缩小显示完整图片
- image 的
mode
属性基本上都是设置 widthFix
,即宽度设置为 320,高度自适应
<view>------------------ Image组件 ------------------</view>
<!-- 根目录: /表示根目录 -->
<!-- 1.图片的基本使用 -->
<!-- image元素宽度和高度: 320x240 -->
<!-- <image src="/assets/zznh.png"/>
<image src="<https://pic3.zhimg.com/v2-9be23000490896a1bfc1df70df50ae32_b.jpg>"/> -->
<!-- 2.图片重要的属性: mode -->
<!-- <image src="/assets/zznh.png" mode="aspectFit"/> -->
<!-- image基本都是设置widthFix -->
<!-- <image src="/assets/zznh.png" mode="widthFix"/> -->
<!-- <image src="/assets/zznh.png" mode="heightFix"/> -->
<!-- 3.选择本地图片: 将本地图片使用image展示出来 -->
<button bindtap="onChooseImage">选择图片</button>
<image class="img" src="{{chooseImageUrl}}" mode="widthFix"/>