小程序模板网

微信小程序之image组件

发布时间:2021-06-28 11:16 所属栏目:小程序开发教程

小程序image支持 JPG、PNG、SVG、WEBP、GIF 等格式;image组件默认宽度320px、高度240px;且支持懒加载;小程序要求图片打包上线的大小不能超过2M,所以很多静态资源放在网络上会比较好,在小程序调用相应的图片链接就好(图片资源可以放在自己的网站进行管理

一、src指定要加载的图片的路径

  图片存在默认的宽度和高度 320*240

二、mode 决定 图片内容 如何 和图片标签宽高做适配

  1) scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

  2) aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图,常用

  3)aspectFill 保持纵横比缩放图片,只保证图片的 短边能完全显示出来,用的比较少

  4)widthFix 宽度指定了之后,高度会自己按比例来调整,常用

  5)top,bottom,center,top left,top right类似于css中的background-position;不缩放图片,只挪动位置

三、小程序当中的图片 直接支持懒加载,需要在image标签添加lazy-load属性;小程序会自己判断 当图片 出现在 视口 上下三屏的高度 之内的时候,会自行加载图片

<!--  image图片组件 -->
<block wx:for="{{imgMode}}" wx:key="index">
  <view>下边图片的mode属性为:{{item}}</view>
  <image src="{{imgUrl}}" mode="{{item}}" lazy-load></image>
</block>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26781.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询