image 标签

  • 1.介绍

    1. image标签用来渲染一张图片,属于非容器类标签。简写img
  • 2.特征

    1. -公共属性、公共样式、公共事件
    2. -其他属性:
    3. -src:<字符串> 图片的url,目前暂时不支持本地图片。
    4. -resize<字符串> 组件的拉伸方式,默认stretch
    5. -其他样式:
    6. -width:<长度> 标签的宽度(必须指定)
    7. -height:<长度> 标签的宽度(必须指定)

image 标签在Android展示

  • 1.手机运行后的效果

    7.8 image标签 - 图1

  • 2.实现流程

(1).在”开发HelloWorld程序(Weex开发)”那节的基础上。在Module的build.gradle文件中引入我们自己的图片加载框架。compile ‘com.squareup.picasso:picasso:2.5.2’

7.8 image标签 - 图3

(2).在Application中提供一个能够获取到Context的方法,这个Context是图片加载框架需要的。当然最好能够采用单例的方法呀。

7.8 image标签 - 图4

(3).还记得我们之前空着的ImageAdapter么,现在可以实现自己的图片下载了。Picasso就是我们的图片加载框架,自行百度如何使用即可。

7.8 image标签 - 图5

(4).更换assets文件夹下面的js文件(经过.we文件编译后的)。

附.we源码:

  1. <template>
  2. <div>
  3. <text>resize=stretch</text>
  4. <image class="icon1" src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg"></image>
  5. <text>resize=cover</text>
  6. <image class="icon2" src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg"></image>
  7. <text>resize=contain</text>
  8. <image class="icon3" src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg"></image>
  9. </div>

  • 1.动手试一试本节的练习,在命令行编译.we源码,看看浏览器里面的效果,或者按照开发HelloWorld(weex开发)那节把编译以后的.js文件放在app的assets文件夹下,在app里面看看效果。
  • 2.公共属性、公共样式、公共事件是所有的标签都具有的特征。在Android的世界里,有两种基类,一个是非容器的控件View,一个是容器类的控件ViewGroup,所有继承自View或者ViewGroup的控件都会具有他们父亲所具有的特征。
  • 3.div标签是否被你忘记了。