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 条评论
登录 后参与评论

相关文章

  • react-native 自动化构建过程(ipa包)

    准备工作 1.安装xcode 2.安装cocospod 3.react-native源文件(git获取源码) 4.安装npm包管理工具 5.安装rea...

    酷走天涯
  • weex-18-loading组件

    重点讲解一个background-image:linear-gradient(to top,#F0AD4E,#F8C433);

    酷走天涯
  • weex-26-dom模块

    我们经常会看到上图所示的需求,当我们将列表向下滑动一段时间后,想要立刻回到顶部,这个时候就要用到本节所示的功能。

    酷走天涯
  • 线性回归

    iOSDevLog
  • # 微信小程序开发之-基本UI

    GuangdongQi
  • TensorFlow2.X结合OpenCV 实现手势识别功能

    使用Tensorflow 构建卷积神经网络,训练手势识别模型,使用opencv DNN 模块加载模型实时手势识别 效果如下:

    砸漏
  • Street Lanes Finder - 检测自动驾驶汽车的车道

    在今天的文章中,将使用基本的计算机视觉技术来解决对于自动驾驶汽车至关重要的街道车道检测问题。到本文结束时,将能够使用Python和OpenCV执行实时通道检测。

    代码医生工作室
  • 互联网黑话指南

    grain先森
  • Reference Nodes(引用节点)

    iOSDevLog
  • php自动识别背景并且把它改为白色

    本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客www.php20.cn

    仙士可

扫码关注云+社区

领取腾讯云代金券