小程序相关（三）

• 1、image：解释：图片，支持 JPG、PNG、GIF、BMP、WEBP 等格式。image 组件默认宽度 300px 、高度 225px 。

  • src：图片资源地址
  • mode：默认scaleToFill， 图片裁剪、缩放的模式
  • lazy-load：图片懒加载，在图片即将进入一定范围（距离当前屏 50px）时才开始进行加载，默认false
  • image-menu-prevent：阻止长按图片时弹起默认菜单（即将该属性设置为image-menu-prevent="true"或image-menu-prevent），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性。注：长按菜单后的操作暂不支持 svg 格式
  • preview：点击后是否预览图片。在不设置的情况下，若 image 未监听点击事件且宽度大于 1/4 屏宽，则默认开启
  • original-src：预览时显示的图片地址

• mode 有效值

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

image css 样式需要设置宽高