2023年6月21日发(作者：)

uni-app组件之image定义image为图⽚组件。说明 组件默认宽度 300px、⾼度 225px；app-nvue平台，暂时默认为屏幕宽度。src 仅⽀持相对路径、绝对路径，⽀持 base64 码；页⾯结构复杂，css样式太多的情况，使⽤ image 可能导致样式⽣效较慢，出现 “闪⼀下” 的情况，此时设置 image{will-change: transform}

,可优化此问题。⾃定义组件⾥⾯使⽤ 时，若

src 使⽤相对路径可能出现路径查找失败的情况，故建议使⽤绝对路径。webp格式的图⽚在Android上是内置⽀持的。iOS上不同平台不⼀样，具体如下：app-vue下，iOS不⽀持；app-nvue下，iOS⽀持；微信⼩程序2.9.0起，iOS⽀持。svg 格式的图⽚在不同的平台⽀持情况不同。具体为：app-nvue 不⽀持 svg 格式的图⽚，⼩程序上只⽀持⽹络地址。参数srcmodelazy-loadfade-showwebpStringStringBooleanBooleanBoolean 图⽚资源地址

微信⼩程序、百度⼩程序、字节跳动⼩程序仅App-nvue 2.3.4+Android有效微信⼩程序2.9.0微信⼩程序2.7.0仅 H5 平台 3.1.1+ 有效'scaleToFill'图⽚裁剪、缩放模式falsetruefalsefalsetrue

图⽚懒加载。只针对page与scroll-view下的image有效图⽚显⽰动画效果默认不解析 webP 格式，只⽀持⽹络资源开启长按图⽚显⽰识别⼩程序码菜单⿏标长按是否能拖动图⽚show-menu-by-Booleanlongpressdraggable@error@loadBooleanHandleEventHandleEvent当错误发⽣时，发布到 AppService 的事件名，事件对象

= {errMsg: 'something wrong'}当图⽚载⼊完毕时，发布到 AppService 的事件名，事件对象 = {height:'图⽚⾼度px', width:'图⽚宽度px'}

mode的参数mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。缩scaleToFill不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素放缩放aspectFit保持纵横⽐缩放图⽚，使图⽚的长边能完全显⽰出来。也就是说，可以完整地将图⽚显⽰出来。缩保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。也就是说，图⽚通常只在⽔平或垂直⽅向是完整的，另⼀个⽅aspectFill放向将会发⽣截取。缩放缩放裁剪裁剪裁剪裁剪裁bottomcenterleft不缩放图⽚，只显⽰图⽚的底部区域不缩放图⽚，只显⽰图⽚的中间区域不缩放图⽚，只显⽰图⽚的左边区域widthFix宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变heightFix⾼度不变，宽度⾃动变化，保持原图宽⾼⽐不变 App 和 H5 平台 HBuilderX 2.9.3+ ⽀持、微信⼩程序需要基础库 2.10.3top不缩放图⽚，只显⽰图⽚的顶部区域裁剪裁剪裁剪righttop left不缩放图⽚，只显⽰图⽚的右边区域不缩放图⽚，只显⽰图⽚的左上边区域top right不缩放图⽚，只显⽰图⽚的右上边区域裁bottom left不缩放图⽚，只显⽰图⽚的左下边区域剪裁剪bottomright不缩放图⽚，只显⽰图⽚的右下边区域参考⽹址

2023年6月21日发(作者：)

uni-app组件之image定义image为图⽚组件。说明 组件默认宽度 300px、⾼度 225px；app-nvue平台，暂时默认为屏幕宽度。src 仅⽀持相对路径、绝对路径，⽀持 base64 码；页⾯结构复杂，css样式太多的情况，使⽤ image 可能导致样式⽣效较慢，出现 “闪⼀下” 的情况，此时设置 image{will-change: transform}

,可优化此问题。⾃定义组件⾥⾯使⽤ 时，若

src 使⽤相对路径可能出现路径查找失败的情况，故建议使⽤绝对路径。webp格式的图⽚在Android上是内置⽀持的。iOS上不同平台不⼀样，具体如下：app-vue下，iOS不⽀持；app-nvue下，iOS⽀持；微信⼩程序2.9.0起，iOS⽀持。svg 格式的图⽚在不同的平台⽀持情况不同。具体为：app-nvue 不⽀持 svg 格式的图⽚，⼩程序上只⽀持⽹络地址。参数srcmodelazy-loadfade-showwebpStringStringBooleanBooleanBoolean 图⽚资源地址

微信⼩程序、百度⼩程序、字节跳动⼩程序仅App-nvue 2.3.4+Android有效微信⼩程序2.9.0微信⼩程序2.7.0仅 H5 平台 3.1.1+ 有效'scaleToFill'图⽚裁剪、缩放模式falsetruefalsefalsetrue

图⽚懒加载。只针对page与scroll-view下的image有效图⽚显⽰动画效果默认不解析 webP 格式，只⽀持⽹络资源开启长按图⽚显⽰识别⼩程序码菜单⿏标长按是否能拖动图⽚show-menu-by-Booleanlongpressdraggable@error@loadBooleanHandleEventHandleEvent当错误发⽣时，发布到 AppService 的事件名，事件对象

= {errMsg: 'something wrong'}当图⽚载⼊完毕时，发布到 AppService 的事件名，事件对象 = {height:'图⽚⾼度px', width:'图⽚宽度px'}

mode的参数mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。缩scaleToFill不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素放缩放aspectFit保持纵横⽐缩放图⽚，使图⽚的长边能完全显⽰出来。也就是说，可以完整地将图⽚显⽰出来。缩保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。也就是说，图⽚通常只在⽔平或垂直⽅向是完整的，另⼀个⽅aspectFill放向将会发⽣截取。缩放缩放裁剪裁剪裁剪裁剪裁bottomcenterleft不缩放图⽚，只显⽰图⽚的底部区域不缩放图⽚，只显⽰图⽚的中间区域不缩放图⽚，只显⽰图⽚的左边区域widthFix宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变heightFix⾼度不变，宽度⾃动变化，保持原图宽⾼⽐不变 App 和 H5 平台 HBuilderX 2.9.3+ ⽀持、微信⼩程序需要基础库 2.10.3top不缩放图⽚，只显⽰图⽚的顶部区域裁剪裁剪裁剪righttop left不缩放图⽚，只显⽰图⽚的右边区域不缩放图⽚，只显⽰图⽚的左上边区域top right不缩放图⽚，只显⽰图⽚的右上边区域裁bottom left不缩放图⽚，只显⽰图⽚的左下边区域剪裁剪bottomright不缩放图⽚，只显⽰图⽚的右下边区域参考⽹址