---

title: type: references order: 2.3 version: 0.10

<image>

<image> 组件用于渲染图片，并且它不能包含任何子组件。可以用 <img> 作简写。

需要注意的是，需要明确指定 width 和 height，否则图片无法显示。

简单例子：

<template>
  <div>
    <img style="width: 560;height: 560;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></img>
  </div>
</template>

体验一下

子组件

<image> 组件不支持任何子组件，因此不要尝试在 <image> 组件中添加任何组件。如果需要实现 background-image 的效果，可以使用 <image> 组件和 position 定位来现实，如下面代码。

<template>
  <div>
    <img style="width:750; height:750;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></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>

体验一下

特性

<image> 组件，包含 src 和 resize 两个重要特性。

• src {string}：定义图片链接，目前图片暂不支持本地图片。

• resize {string}：可以控制图片的拉伸状态，值行为和 W3C 标准一致。

  可选值为：

  • stretch：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
  • cover：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
  • contain：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

  例子：

  

  体验一下

样式

• 通用样式：支持所有通用样式

  • 盒模型
  • flexbox 布局
  • position
  • opacity
  • background-color

  查看 组件通用样式

事件

• load v0.8+：当图片加载完成时触发。目前在 Android、iOS 上支持，H5 暂不支持。

• 通用事件

  支持所有通用事件：

  • click
  • longpress
  • appear
  • disappear

  查看 通用事件

约束

1. 需要指定宽高；
2. 不支持子组件。

示例

我们这里展示了一篇文章，文章标题有一副背景图。

这个效果实现起来非常容易，我们只需要将标题文案通过 position: absolute 进行定位即可。唯一需要注意的一点是，Weex 目前不支持 z-index，因此必须把上层元素放在后。

<style>
  .page-head {
    width:750;
    height:200;
  }
  .title-bg {
    width:750;
    height:200;
  }
  .title-box {
    width: 750;
    height: 200;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .title {
    color: #ffffff;
    font-size: 32;
    font-weight: bold;
  }
  .article {
    padding: 20;
  }
  .paragraph{
    margin-bottom: 15;
  }
</style>

<template>
  <scroller class="wrapper" >
    <div class="page-head" >
      <image class="title-bg" resize="cover" src="https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png"></image>
      <div class="title-box">
        <text class="title">Alan Mathison Turing</text>
      </div>
    </image>
    <div class="article">
      <text class="paragraph">Alan Mathison Turing ( 23 June 1912 – 7 June 1954) was an English computer scientist, mathematician, logician, cryptanalyst and theoretical biologist. He was highly influential in the development of theoretical computer science, providing a formalisation of the concepts of algorithm and computation with the Turing machine, which can be considered a model of a general purpose computer.Turing is widely considered to be the father of theoretical computer science and artificial intelligence.</text>
      <text class="paragraph">During the Second World War, Turing worked for the Government Code and Cypher School (GC&CS) at Bletchley Park, Britain's codebreaking centre. For a time he led Hut 8, the section responsible for German naval cryptanalysis. He devised a number of techniques for speeding the breaking of German ciphers, including improvements to the pre-war Polish bombe method, an electromechanical machine that could find settings for the Enigma machine. Turing played a pivotal role in cracking intercepted coded messages that enabled the Allies to defeat the Nazis in many crucial engagements, including the Battle of the Atlantic; it has been estimated that this work shortened the war in Europe by more than two years and saved over fourteen million lives.</text>
      <text class="paragraph">After the war, he worked at the National Physical Laboratory, where he designed the ACE, among the first designs for a stored-program computer. In 1948 Turing joined Max Newman's Computing Machine Laboratory at the Victoria University of Manchester, where he helped develop the Manchester computers and became interested in mathematical biology. He wrote a paper on the chemical basis of morphogenesis, and predicted oscillating chemical reactions such as the Belousov–Zhabotinsky reaction, first observed in the 1960s.</text>
      <text class="paragraph">Turing was prosecuted in 1952 for homosexual acts, when by the Labouchere Amendment, "gross indecency" was still criminal in the UK. He accepted chemical castration treatment, with DES, as an alternative to prison. Turing died in 1954, 16 days before his 42nd birthday, from cyanide poisoning. An inquest determined his death as suicide, but it has been noted that the known evidence is also consistent with accidental poisoning. In 2009, following an Internet campaign, British Prime Minister Gordon Brown made an official public apology on behalf of the British government for "the appalling way he was treated." Queen Elizabeth II granted him a posthumous pardon in 2013.</text>
    </div>
  </scroller>
</template>

体验一下