weex-16-image组件

本节学习目标

学会使用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动画效果呢?