文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序 怎么插入图片?image组件的使用教程。

2023-09-05 06:52

关注

这期我们来学学怎么在小程序中插入图片

        是小程序中一个图片的组件

        image组件有一个默认宽度和高度(宽300px,高240px)

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

我们先添加一个image组件给他一个边框看看他的默认情况

 我们从图中可以看出,我什么都没加有一个基础的框框大小(宽300px,高240px)

属性类型默认值必填说明最低版本
srcstring图片资源地址1.0.0
modestringscaleToFill图片裁剪、缩放的模式1.0.0
webpbooleanfalse默认不解析 webP 格式,只支持网络资源2.9.0
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载1.5.0
show-menu-by-longpressbooleanfalse长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单。2.7.0
binderroreventhandle当错误发生时触发,event.detail = {errMsg}1.0.0
bindloadeventhandle当图片载入完毕时触发,event.detail = {height, width}1.0.0

我们先准备一张

这张照片 555*545 我们先在把他放入文件夹 

然后创建一个新的image组件看看他是怎么显示的

  以上是image组件中的常用属性,但是为了大家学习效率,我只讲解一下mode属性里面的几个属性值

合法值说明最低版本
scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变2.10.3

我们从上面先看到没有添加mode元素的时候照片的比例是有变化的,强行占满了默认的(宽300px,高240px)像素大小。

当我们使用scaleToFill值试一下

 我们发现我们使用了这个属性值照片没有发生变化这是为什么呢?

因为在image组件没有mode值的时候默认就是scaleTofill属性值,他的意思就是把图片拉深,填满整个盒子。

我们将值修改到aspectFit试试,看看啥效果。

 我们发现他等比缩放了我们的图片,根据小于图片长或宽的大小进行等比缩放,直到图片能完全展示出来。

我们将值修改到aspectFill试一下。

 我们发现这个值产生的情况就是将我们的图片进行等比缩放占满整个盒子。

这个用法就和上面相似改变了一下缩放模式长款有一个边固定缩放。

 他的width值和盒子保持一致,高等比变化,将盒子撑开来显示图片

这个用法和上面其实是差不多的道理

就是图片更具盒子的高进行等比缩放,从而达到他的宽变化。

以上就是image组件的mode常用参数讲解,如果觉的没问题的可以进群一起聊技术

来源地址:https://blog.csdn.net/weixin_50123771/article/details/128900781

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯