image组件的基本使用
就是用来显示图片的
src:
来设置我们图像的路径
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
src | String | 图片资源地址 |
<template>
<div>
<view>
<image src="../../static/images/ysn1.jpg"></image>
</view>
</div>
</template>
<image>
组件默认宽度 300px、高度 225px;app-nvue平台,暂时默认为屏幕宽度
src
仅支持相对路径、绝对路径,支持 base64 码;
如何让图片正常显示
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
mode 有效值:
mode 有 14 种模式,其中 5 种是缩放模式,9 种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
缩放 | heightFix | 高度不变,宽度自动变化,保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
常用的aspectFit
和aspectFill
aspectFit:
保持纵横比缩放图片,使图片的长边能完全显示出来。
也就是说比如横纵向同时缩放,哪边到底就不在进行缩放
<view>
<image src="../../static/images/ysn1.jpg" mode="aspectFit"></image>
</view>
aspectFill:
保持纵横比缩放图片,只保证图片的短边能完全显示出来。
<view>
<image src="../../static/images/ysn1.jpg" mode="aspectFill"></image>
</view>
放到最大,但是只要又一遍超出了默认宽高,那就超出部分就截掉了
这里src
属性和mode
属性会经常会用到