<image>组件

[Erwin11]

本文档已迁移至 https://weex-project.io/cn/references/components/image.html ，此处不再维护，谢谢。

< image > 组件

概述

image 标签用于渲染一个特定的图片，并且它不能包含任何子组件。可以用img 作简写。

注意: width和height需要指定，否则会不工作。

简写：

子组件

这个组件不支持子组件。

属性

• src:<字符串>属性 图片原始链接
• resize: <字符串> 组件的拉伸属性。默认值是stretch,如果此属性不指定，该值可能是cover,contain , 值行为和W3C标准一致。

其他属性请查阅基本属性

样式

• width : <长度>属性 组件的宽度，需指定。
• height: <长度>属性 组件的高度，需指定。

基本样式： 查看基本样式

• 支持 flexbox 相关样式
• 支持 box 模型相关样式
• 支持 position 相关属性
• 支持 opacity,background-color 等。

事件

基本事件：查阅基本事件

• 支持 click 事件。查阅基本事件
• 支持 appear / disappear 事件。查阅基本事件

例子

<div>
  <image src="..." ></image>
  <text>...</text>
</div>

简写：

<div>
  <img src="..." ></img>
  <text>...</text>
</div>

[emptywalker]

能给一个根据屏幕宽度去设置图片宽度的属性吗？ 如果想把它的宽度设置成屏幕的一半或三分之一等等呢。

这个图片resize属性，我将原图是个正方形的宽度不是设置成正方形后， 不管用哪一个属性 都是拉伸状态， 不能正常显示

求解

[Security111588]

@emptywalker 有的，vw，vh，意思是把屏幕宽或高分成100份，一份的宽或高。

[Security111588]

如果支持子组件就好了，可以很简单就实现背景图的需求。

[Jam1zhu]

resize三个属性在andorid机上并没有任何变化。。。每个小图标都要单独调试样式。好坑。

[liuchuhui]

<style> .header{ width: 100%; height: 200px; background-color: rgb(209,16,35); text-align: center; } .avatar{ width: 60px; height: 60px; border-radius: 30px; margin: 0px auto; } </style> <script> module.exports = { data:{ avatarUrl: '../../images/tu4482_22.jpg' }, methods:{ } } </script>

image如何居中，查看解析后的html和css, margin:0px auto;无用

[wzj583585700]

怎么把文字添加到图片上面

[bluesky0109]

不能内嵌子组件，对应背景图这种 常见场景 如何应对？？

[malaimoo]

如何添加本地图片?

[longjiayu95]

同问怎么添加本地图片？

[longjiayu95]

@wang111588 请问这个vh跟vw具体是怎么用的？能不能给个例子

[malaimoo]

@longjiayu95 不支持本地图片，我已经废弃这个项目了。对于TB这种纯展示的可能比较合适，稍微有点交互的就不行了。

[gangoogle]

根据这个可以设置图片占屏幕的宽度为1/3吧，我做安卓开发都是这样弄的

[gangoogle]

<img style={flex:1;}/><div style={flex:2}/>

[yundongbot]

@bluesky0109 背景图可以通过 position 来解决

<template>
  <div>
    <img style="width:750; height:750;" src="https://img.alicdn.com/tps/TB1RD.aOpXXXXbzXXXXXXXXXXXX-560-560.png"></img>
    <div class="title">
      <text style="font-size:50; color: #ff0000">你好，image</text>
    </div>
  </div>
</template>
<style>
  .title{
    position:absolute;
    top:50;
    left:10;
  }
</style>

[RrtoyewxXu]

本地图片不支持吗？通过file://或者assert://也不行吗

[RrtoyewxXu]

按理内置js bundle文件应该加载本地的图片，内置的js bundle文件不都是放在assert文件里面，然后通过/或者xx/这种找不到文件吗？

[yundongbot]

@emptywalker Weex 是以 750 宽度自适应的，图片的宽度也是根据这个比例自适应。将图片宽度设为 375，在任何大小的屏幕上，图片均为一半。

[yundongbot]

@RrtoyewxXu @longjiayu95 @malaimoo Weex 目前没有提供本地图片功能，不过可以自己实现图片库扩展

[yundongbot]

@Jam1zhu
Hi，resize 属性都支持的。
可查看最新版的文档示例 http://alibaba.github.io/weex/cn/doc/components/image.html
示例： http://dotwe.org/ede2959ea5225642cf6202f9e3b43d3a

[yundongbot]

@wzj583585700
背景图可通过 position 来模拟。
查看最新版的文档示例 http://alibaba.github.io/weex/cn/doc/components/image.html
示例： http://dotwe.org/9cfb27a6cb3c30f3316a2a15257fca5d

[yundongbot]

@longjiayu95 目前不支持 vh 和 vw 单位。

[yundongbot]

本文档已迁移至 https://weex-project.io/cn/references/components/image.html ，此处不再维护，谢谢。