<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}/>

[snoozybot]

@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://也不行吗