本节学习目标
学会使用image组件
使用image注意的事情
接下来我先说一下image 使用的限制
- 不能包含子标签
- iOS不支持gif格式,需要自己实现(本节不讲)
- 必须设置width和height 否则在手机端显示不出来
- 不支持简写
<img>,必须使用<image> - 手机端不支持本地图片,目前只支持网络图片(http://...)
接下来我们看一下基本的使用
使用src设置定义图片链接
代码如下
<template>
<div class="page">
<image src="http://ww2.sinaimg.cn/large/006tKfTcgy1fez04i56w5j31hc0kuwhz.jpg" class="image"></image>
</div>
</template>
39C516C1-74C6-40EF-8454-129EB1061A46.png
布局代码
<style>
.page{
display: flex;
flex-direction: column;
}
.image{
width:750px;
height: 300px;
background-color: gold;
}
</style>
特性
设置拉伸状态(resize)
-
stretch-将图片拉伸的和容器的宽和高一样长(默认值)
<image src="http://ww2.sinaimg.cn/large/006tKfTcgy1fez04i56w5j31hc0kuwhz.jpg" class="image" resize='stretch'></image>
39C516C1-74C6-40EF-8454-129EB1061A46.png
- cover 按照比例放大,覆盖image容器
E9BA11E0-7C81-47FB-9583-B0B29DCCB3B5.png
-
contain 按照比例缩放,如果图片的长大于宽,则保持长度和image组件容器的长度一致,反之,宽度和image组件的宽度 一致
DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png
接下来我们加载一张gif动画
<image src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff6xfpclgfg302s02s3yl.gif" class="image" resize='contain'></image>
浏览器上支持gif,手机上不支持,对于contain,显示的效果也是不一样的,手机上是居中的,但是网页上是下面这个样子,使用是务必注意!
196F800E-58EA-44C3-9DD4-FF8A27D10BA1.png
- placeholder 占位符
一般我们的网络图片没有加载出来之前,image会预先放一个占位图片,当网络图片下载完成后,会替换掉这个图片,接下来看我们如何实现
<image placeholder='http://ww2.sinaimg.cn/large/006tKfTcgy1fez04i56w5j31hc0kuwhz.jpg' src="http://ww1.sinaimg.cn/large/006tNbRwgy1ff6xfpclgfg302s02s3yl.gif" class="image" resize='contain'></image>
思考？
如何支持制作gif动画效果呢?
