image

基础库 1.0.0 开始支持，低版本需做兼容处理。

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性	类型	默认值	必填	说明	最低版本
src	string		否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
show-menu-by-longpress	boolean	false	否	开启长按图片显示识别小程序码菜单	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

mode 的合法值

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

Bug & Tip

tip：image组件默认宽度300px、高度240px
tip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

示例

<!-- 图片懒加载srclazy-load 是否懒加载 图片默认加载三屏show-menu-by-longpress 是否展示识别小程序菜单-->
<image src="/static/img/01.gif" bindload="imgload"/>
<!-- 加载出错 -->
<!-- <image src="/static/img/022.gif" binderror="imgerror"/> --><image src="/static/img/02.gif" show-menu-by-longpress /><image src="/static/img/01.gif" lazy-load bindload="numadd" />
<image src="/static/img/02.gif" lazy-load bindload="numadd" />
<image src="/static/img/03.gif" lazy-load bindload="numadd" />
<image src="/static/img/01.gif" lazy-load bindload="numadd" />
<image src="/static/img/02.gif" lazy-load bindload="numadd" />
<image src="/static/img/03.gif" lazy-load bindload="numadd" />
<image src="/static/img/01.gif" lazy-load bindload="numadd" />
<image src="/static/img/02.gif" lazy-load bindload="numadd" />
<image src="/static/img/03.gif" lazy-load bindload="numadd" />
<image src="/static/img/01.gif" lazy-load bindload="numadd" />
<image src="/static/img/02.gif" lazy-load bindload="numadd" />
<image src="/static/img/03.gif" lazy-load bindload="numadd" />
<image src="/static/img/01.gif" lazy-load bindload="numadd" />
<image src="/static/img/02.gif" lazy-load bindload="numadd" />
<image src="/static/img/03.gif" lazy-load bindload="numadd" />

// pages/06image/06image.js
let num = 0;
Page({/*** 页面的初始数据*/data: {},imgload(e){console.log(e,'img实际大小')},imgerror(e){console.log(e,'图片加载失败')},// 记录图片加载次数numadd(){num++;console.log('图片加载次数',num);}})

微信小程序媒体组件-image图片懒加载效果相关推荐

微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
JS实现图片懒加载效果
文章目录前言一.图片实现懒加载步骤二.案例练习(三国女将) 1. html 代码 2. css 代码 3. js 代码执行结果前言懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器 ...
微信小程序 + vant组件van-card 图片解析不到
在使用vant组件制作微信小程序项目时,遇到了图片解析不到的问题. 场景如下: 在页面中,应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性,即可在左侧位 ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
微信小程序：previewImage实现图片放大预览效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览,这个效果在京东淘宝都可以看到 ...
【微信小程序】image真机无法加载网络图片
背景由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...
【微信技术-微信小程序】------- 渐进式骨架屏（加载流）（第二篇）
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录一.什么是渐进式骨架屏? 二.实现渐进式骨架屏三.效果展示下载示例代码地址: 渐进式骨架屏示例代码-下载一 ...

微信小程序媒体组件-image图片懒加载效果

image

Bug & Tip

示例

微信小程序媒体组件-image图片懒加载效果相关推荐

最新文章

热门文章