微信小程序 image 图片 组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看)
图片。支持 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组件默认宽度320px、高度240pxtip
:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
示例代码
在开发者工具中预览效果
原图
index.wxml
<view class="page"><view class="page__hd"><text class="page__title">image</text><text class="page__desc">图片</text></view><view class="page__bd"><view class="section section_gap" wx:for-items="{{array}}" wx:for-item="item"><view class="section__title">{{item.text}}</view><view class="section__ctn"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image></view></view></view>
</view>
index.js
Page({data: {array: [{mode: 'scaleToFill',text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'}, {mode: 'aspectFit',text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'}, {mode: 'aspectFill',text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'}, {mode: 'top',text: 'top:不缩放图片,只显示图片的顶部区域'}, {mode: 'bottom',text: 'bottom:不缩放图片,只显示图片的底部区域'}, {mode: 'center',text: 'center:不缩放图片,只显示图片的中间区域'}, {mode: 'left',text: 'left:不缩放图片,只显示图片的左边区域'}, {mode: 'right',text: 'right:不缩放图片,只显示图片的右边边区域'}, {mode: 'top left',text: 'top left:不缩放图片,只显示图片的左上边区域'}, {mode: 'top right',text: 'top right:不缩放图片,只显示图片的右上边区域'}, {mode: 'bottom left',text: 'bottom left:不缩放图片,只显示图片的左下边区域'}, {mode: 'bottom right',text: 'bottom right:不缩放图片,只显示图片的右下边区域'}],src: '../resources/cat.jpg'},imageError: function (e) {console.log('image3发生error事件,携带值为', e.detail.errMsg)}
})
运行效果:
微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。
微信小程序 image 图片 组件相关推荐
- 微信小程序 image图片组件实现宽度固定 高度自适应
添加mode属性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode=& ...
- 微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
- 微信小程序上传组件(可同时长传图片+视频)
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
- 微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
- 微信小程序自定义标签组件component封装、组件生命周期,组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信 本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
- 微信小程序操作图片放大、缩小、旋转、拖拽
微信小程序操作图片放大.缩小.旋转.拖拽 在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...
- ready等方法 微信小程序_微信小程序设置图片固定比例
小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序设置图片固定比例 . 12月28日消息,微信官方日前发布消息称,为了让微信小程序相关成员在无线端更方便地管理微信小程序,将开发小程 ...
- 微信小程序裁剪图片成圆形
代码地址如下: http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在git ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
最新文章
- TinyML设备设计的Arm内核
- python官网安装步骤-Python解释器的安装步骤
- Hadoop工具如何形成SAP Hana的大数据平台
- iphone以旧换新活动_【武商襄阳购物中心】 参与iphone以旧换新活动,最高可抵4300元,旧机可享10%额外补贴...
- vim 粘贴代码格式
- 1.2 位于Shell脚本第一行的#!
- azure第一个月_MLOps:两个Azure管道的故事
- d3 tip mysql_mysql
- python填空题_Python题库-填空题
- Linux内存带宽的一些测试笔记
- 计算机绘图图库的创建,工程制图与计算机绘图.doc
- Unity -- .NET下的原生Ioc框架
- OpenCV medianBlur、GaussianBlur和bilateralFilter (中值滤波、高斯滤波、双边滤波)
- 阿里云边缘计算又要放大招了,7月24开发者大会现场揭秘,邀你参加!
- Android手机型号及产品名
- 商业模式画布 - 天涯的日志 - 网易博客
- Consul 集群部署
- 软件架构-redis特性和集群特性(下)
- 我的团长我的团分集剧情介绍
- ROS之launch文件解析
热门文章
- android JNI基本库(jsting转string和C多线程调用java方法的说明)
- Https与TCP协议的三次握手、四次挥手
- 接收用户输入的一个5位数,求个位数、十位数、百位数、千位数、万位数的和
- 10 个用图表解释JavaScript 闭包的面试题
- ML机器学习基于树的家族
- Python学习笔记(二)——使用Eclipse开发Python程序
- 宝宝的眼睛晶莹明亮与微量元素
- MIDI制作的相关软件
- QCalendarWidget实现某个区间时间凸出显示
- 论文主要要点记录《BiSeNet V2: Bilateral Network with Guided Aggregation for Real-time Semantic Segmentation》