微信小程序开发初学：图片组件 - image

image组件用于在小程序中插入图片并对插入的图片进行简单修改。支持 JPG、PNG、SVG、WEBP、GIF 等格式。

image具有的属性

src
类型：String
默认值：无
图片的网络地址或本地文件目录

mode
类型：String
默认值：scaleToFill
图片裁剪，缩放的模式

mode属性合法值
（1）scaleToFill
缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
（通常图片会形变，不美观）

（2）aspectFit
缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。(图片保持原有纵横比，但图片略小)

（3）aspectFill
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。（保持图片横纵比，但只会截取一部分显示）

（4）widthFix
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
（图片保持原有纵横比，铺满屏幕，美观且实用）

（5）heightFix
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

（6）裁剪模式的值
top：只显示顶部区域
bottom：只显示底部区域
center：只显示中间区域
left：只显示左边区域
right：只显示右边区域
top left , top right …

show-menu-by-longpress
类型：boolean
默认值：false
开启长按图片显示识别小程序码菜单

示例：

<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1950131119,821754358&fm=26&gp=0.jpg" mode="widthFix">
</image>
<!--网络地址图像-->

<view>Img1:mode为默认属性</view>
<image class="heiImg1" src="/images/heightPic.jpeg"></image>
<!--本地目录图像-->
<!--强制拉伸，不美观-->

<view>Img2 : mode="aspectFit"</view>
<image class="heiImg2" src="/images/heightPic.jpeg" mode="aspectFit"></image>
<!--图片保持原有纵横比，但图片略小-->

<view>Img3 : mode="aspectFill"</view>
<image class="heiImg3" src="/images/heightPic.jpeg" mode="aspectFill"></image>
<!--保持图片横纵比，但只会截取一部分显示-->

<view>Img4 : mode="widthFix"</view>
<image class="heiImg4" src="/images/heightPic.jpeg" mode="widthFix"></image>
<!--图片保持原有纵横比，铺满屏幕，美观且实用-->

<view>Img5 : mode="heightFix"</view>
<image class="heiImg5" src="/images/heightPic.jpeg" mode="heightFix"></image>
<!--与heiImg2相似-->

<view>Img6 : show-menu-by-longpress设置允许用户对图片进行识别等操作</view>
<image class="heiImg6" src="/images/widthPic.jpg" show-menu-by-longpress></image>

参考自小程序API：API - image