前言

不知不觉到第四篇了，回看前面几篇写的好像没有一点深度，总感觉自己是厚着脸皮在写，但是再想想自己也不是要写多么好，给多少人看，其实就是自己学习的一个总结，巩固自己的知识。顺便如果可以帮到一些同学那就更好，这就是我的初衷啊！所以我还会继续，今天就要讲讲 <image> 组件了。

<image>的作用

我好像很喜欢拿HTML里面的标签来做对比，🆗，可能已经猜到我要说什么了，没错其实<image>标签对应的就是HTML里的<img>标签嘛！它们的功能和作用基本没什么变化，都是在页面上显示一张图片。但是也有一些不同，那就是<image>的功能更加的强大，微信小程序提供了很多的属性给它，赋予了它很强的功能，比如：懒加载、图片缩放、裁剪等。详情见 文档

如何使用

这里强调的是wxml里面所有的标签  都是两两成对的，有开始标签就要有闭合标签，不然会报错的， （ps:除了<icon>）所以正确用法是这样的<image src= “图片路径”></image>，图片的路径，可以是相对路径也可以是绝对路径，看一段代码

wxml代码

<image src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' ></image>

运行结果

这里还是贴个图吧！因为有个对比好明白一点，😂。欧克，可以看到<image>是有默认宽高的！默认的宽度为300px、高度为225px 我们肯定是不能用默认的宽高的，因为我们需要的是一个美观的界面，所以…

高度自适应

<image>的高度自适应很简单就可以实现，因为只需要用到它的一个mode属性就可以完成这件事，这个属性有很多的值，而用到最多的就是mode=“widthFix”，这就是高度自适应了，来和上面对比一下吧

wxml代码

<image src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' mode="widthFix"></image>

运行结果

可以看到高度的明显变化，自适应是很有用的一个东西，其他的一些属性，可以看看文档，文档很详细，文章的上面有个传送门。当然只靠着肯定是不够的，还需要借助WXSS改变image的样式，使你的页面更加美观。

结束语

欢迎评论，也欢迎大佬提出意见。