Tips

    • 组件默认宽度 300px、高度 225px；
    • src 仅支持相对路径、绝对路径，支持 base64 码；
    • 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
    • 自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。mode 有效值：

    mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

    模式值说明
    缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变
    裁剪top不缩放图片，只显示图片的顶部区域
    裁剪bottom不缩放图片，只显示图片的底部区域
    裁剪center不缩放图片，只显示图片的中间区域
    裁剪left不缩放图片，只显示图片的左边区域
    裁剪right不缩放图片，只显示图片的右边区域
    裁剪top left不缩放图片，只显示图片的左上边区域
    裁剪top right不缩放图片，只显示图片的右上边区域
    裁剪bottom left不缩放图片，只显示图片的左下边区域
    裁剪bottom right不缩放图片，只显示图片的右下边区域

    示例：

    1. export default {
    2.     data() {
    3.         return {
    4.             array: [{
    5.                 mode: 'scaleToFill',
    6.                 text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    7.             }, {
    8.                 mode: 'aspectFit',
    9.                 text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    10.             }, {
    11.                 mode: 'aspectFill',
    12.                 text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    13.             }, {
    14.                 text: 'top：不缩放图片，只显示图片的顶部区域'
    15.             }, {
    16.                 mode: 'bottom',
    17.                 text: 'bottom：不缩放图片，只显示图片的底部区域'
    18.             }, {
    19.                 mode: 'center',
    20.                 text: 'center：不缩放图片，只显示图片的中间区域'
    21.             }, {
    22.                 mode: 'left',
    23.                 text: 'left：不缩放图片，只显示图片的左边区域'
    24.             }, {
    25.                 mode: 'right',
    26.                 text: 'right：不缩放图片，只显示图片的右边边区域'
    27.             }, {
    28.                 mode: 'top left',
    29.                 text: 'top left：不缩放图片，只显示图片的左上边区域'
    30.             }, {
    31.                 text: 'top right：不缩放图片，只显示图片的右上边区域'
    32.             }, {
    33.                 mode: 'bottom left',
    34.                 text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    35.             }, {
    36.                 mode: 'bottom right',
    37.                 text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    38.             }],
    39.             src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
    40.         }
    41.     },
    42.     methods: {
    43.         imageError: function(e) {
    44.             console.error('image发生error事件，携带值为' + e.detail.errMsg)
    45.         }
    46.     }
    47. }

    原图

    scaleToFill：不保持纵横比缩放图片，使图片完全适应

    uniapp

    aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来

    uniapp

    top：不缩放图片，只显示图片的顶部区域

    bottom：不缩放图片，只显示图片的底部区域

    uniapp

    center：不缩放图片，只显示图片的中间区域

    left：不缩放图片，只显示图片的左边区域

    uniapp

    top left：不缩放图片，只显示图片的左上边区域

    uniapp

    top right：不缩放图片，只显示图片的右上边区域

    bottom left：不缩放图片，只显示图片的左下边区域

    uniapp

    bottom right：不缩放图片，只显示图片的右下边区域