小程序开发基础7--图片控件、视频控件学习

一，image组件

image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。

官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
文档直通车

当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。

1. image组件图片显示

我们通过src属性来设置要显示的图片资源，图片资源有两种

本地图片资源
网络图片资源

我们设置显示图片的语法如下

<image src="图片资源地址"></image>

2.通过mode设置图片裁剪、缩放的模式

image组件另外一个比较重要的属性就是mode了。我们在使用图片时，不能百分之百保证图片的比例正好是我们想要的，这个时候就要用到图片的裁剪和缩放了。
mode 的常用设置如下

比如我们有一个原图如下。

设置不同的mode值，可以很明显的看出来区别

3.图片懒加载

小程序里image组件是支持图片懒加载的，当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。

二，video组件

video组件：主要用来实现视频播放。

官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
文档直通车

• video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。
  
• 当我们需要页面视频自动播放时需要设置 autoplay 属性为true
• 当我们需要视频一打开是静音模式时，设置 muted 属性为true