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动画效果呢?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客编程

jQueryMobile快速入门

  jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动...

14020
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

627100
来自专栏十月梦想

Vue动画封装的两种方式

    js方式我们需要引入之前的velocity.js,所需属性放入tempalate中,在模板的插槽中定义动画三个状态!

30620
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

34490
来自专栏实战docker

dubbo服务提供者在tomcat启动失败的问题

dubbo的服务提供者是个web服务,打成war包后在tomcat启动失败,查看tomcat的logs目录下的localhost.2017-05-15.log文...

1.2K100
来自专栏欧科云

让你的网站文字“抖”起来

最近听说了一款挺火的软件,叫 “抖音”,发现它的标志有蓝红双色的叠加。我突然想到,我们的网站文字能否做出这个效果,甚至让文字像这个一样抖起来?答案当然是可以的。

11230
来自专栏练小习的专栏

ios下滚动条默认显示

研究这个问题的背景: 众所周知,ios下垂直和水平滚动条都是默认不出现,用户滑动时,才显示,滑动结束以后,又隐藏滚动条。 横向滚动条默认隐藏,用户很可能会忽略右...

63160
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

1.1K60
来自专栏吴伟祥

Chrome 键盘快捷键 转

10320
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

2.1K90

扫码关注云+社区

领取腾讯云代金券