时间：2020-05-06 18:53作者：admin来源：未知人气：515我要评论(0)
今天，我们来学习图像媒体组件的使用方法，希望大家可以在学习后，能掌握图像媒体组件的使用方法。
我们打开小程序开发者文档，可以看到媒体组件有下面的这几种：audio、camera、image、live·player、live·pusher和video。
这里可以简单的说一下：
不同于html里面的<img>标签，这个组件的功能比<img>更强大，可以选的内容也更多，
好的，我们先来打开微信开发者文档看一下这个小程序的属性：
要说一下，这里的image组件支持的图片类型有：JPG、PNG和SVG格式，至于以后会不会支持别的也不清楚。但是现在这些也够用了。（SVG是logo可以用的图形）
这个其实可以说的不多，这个属性之前已经讲过了，调用本地图片的时候需要先把本地图片放到这个小程序制作的根目录里面来，可以创建一个images的文件夹，系统会自动识别图片的，其他的不需要太管，只要代码不错就行。
参考代码：
<image src="/pages/images/123.jpg"></image>
调用网络图片的方法更加简单，去网上找个图片，复制一下地址，将src后面的链接换成这个网络链接即可。
参考代码：
<image src="http://pic1.win4000.com/wallpaper/2020-01-04/5e105ee7111ae.jpg"></image>
不过话说在前面，这里的图片不建议调用网络的，这一方面是安全的问题，另外一方面也是版权的问题，如果你不想被人找上门来，最好还是自己的图片放在本地或服务器里比较好。
mode属性是个很厉害的属性，那么他有多厉害呢？首先，我们需要查看一下开发者文档里面mode的合法值。
因为截图软件的局限，没有截完，但是总之就是很多。
在说mode开始之前，我们先来说说这个尺寸的问题，我们现在这个<image>组件里面加一个class="mypic"。
然后在wxss里面设置一下，将这个mypic设置为高300像素，宽500像素，这个时候我们可以看到图片根本放不下，这是因为尺寸决定的。
我们在这里可以用百分号来表示，因为我们不可能知道每一台手机的宽度和高度，但是可以用百分比进行调整。大家可以自己去尝试，调到合适的位置最好。
刚才讲了个插曲，那么我们接下来顺着刚才的内容接着讲下去。
把刚才的大小删掉，用原图片来跟大家讲。
这个合法值倒不必说了，系统默认的就是这个，他的意思就是让图片完全填满，不是很建议使用的，是比较懒的一种合法值。（用的最少，会压缩）
这个合法值也是缩放，但是他是有规矩的缩放，保留一定的比例，比方说你是图片是9X16的，他缩放也是9X16，这个还是可以的。（按照长边来缩放）
这个合法值类似于上一个，但是不完全一样，这个合法值是宽为比例，可能保留了宽，你的高也会因而受到限制。（可能会被裁剪）
宽度不变，高度自动变化，保证原图的大小。（比较好的方法之一）
我觉得可能是小编找的图片太好了，这张图片放大的看起来效果都差不多，小伙伴们可以自己去尝试尝试。
我们如果在正式编程的时候，是不会单独的使用<image>标签的，通常会用一些组件进行嵌套，例如下方的这个操作：
参考代码：
<view class="out">
<image src="/pages/images/123.jpg"></image>
</view>
我们将这段代码负责N份，小编这里复制了三份，这个时候我们需要对这个out设置样式。
我们在这里设置宽度为200px，200就够了，高度不需要设置。
参考代码：
.out{
width: 200px;
}
补充一句，Ctrl+/就可以注销代码了。
我们在这里接着讲，我们可以在每个图片下面插上一个view组件，在里面输入：图片名称。
参考代码：
<view class="out">
<image src="/pages/images/123.jpg"></image>
<view>图片名称1</view>
</view>
我们可以将之前的out大小改一下，改成100px像素的大小。
嗯，好像没什么用。
那这样，我们在里面加上这个代码，就可以实现图片的方位了：（还是在这个页面里）
参考代码：
.out image{
width: 100px;
}
注意看！注意看！
这里是不是变化了？
参考代码：
<view class="out">
<image src="/pages/images/123.jpg" mode="widthFix"></image>
<view>图片名称1</view>
</view>
将所有的图片都简单的设置一下，怎么样，是不是好看多了。
来到wxss页面，在.out后面加个float：left。将这三个放到一个水平线上来。
参考代码：
.out{
width: 100px;
float: left;
}
不过是不是感觉有些拥挤？那我们可以增加一个间距：
搞定了。
参考代码：
.out{
width: 100px;
float: left;
margin: 10px;
}
mode属性还有像这些的程序，这些程序需要结合特殊的情况来使用，大家可以自行去尝试一番，这里就不介绍了。
这个属性是懒加载，需要借助js来完成，用户在看图片的时候需要加载几张图片之后才会出现这个图片。
这个属性很好理解，就是长按识别二维码。
相关阅读 万彩动画大师怎么添加一个场景的进场特效剪映怎么提速视频声音不变调剪映怎么压缩视频大小剪映如何设置视频的区域范围mindmaster如何使用分支箭头样式功能mindmaster如何给主题添加优先级图标mindmaster怎么在两个框框之间添加一个框框美图秀秀怎么把照片变成黑白美图秀秀镜面翻转怎么弄美图秀秀如何消除红眼
热门文章
电脑上圈11怎么打_⑪_圈11如何输入？
A4纸与16K纸的区别
如何利用“工信部12300”微信公众号投诉移动、联通、电信的方法
海康摄像头忘记密码，自己如何快速重置密码
最新文章
万彩动画大师怎么添加一个场景的进场特效
剪映怎么提速视频声音不变调
剪映怎么压缩视频大小剪映如何设置视频的区域范围mindmaster如何使用分支箭头样式功能mindmaster如何给主题添加优先级图标
人气排行 电脑上圈11怎么打_⑪_圈11如何输入？A4纸与16K纸的区别如何利用“工信部12300”微信公众号投诉移动、联通、电信的方法海康摄像头忘记密码，自己如何快速重置密码海康威视网络摄像头接网线的线序与接法Secure Boot安全启动开启关闭方法手动设置IP地址和DNS的方法小米手机 如何安装谷歌服务框架，最简单的方法
盖楼回复X
(您的评论需要经过审核才能显示)
查看所有0条评论>>