Appearance

目录

<image> ​

<image>是Tenon中用于渲染图片的组件

WARNING

  • <image>不支持嵌套子组件

  • <image>标签使用时必须指定宽高

属性 ​

属性名类型默认值说明
srcString""普通图片，要显示的图片的Url（支持base64和url）
resizeString"stretch"图片拉伸模式
模式类型:
stretch:按照image组件的宽高比例缩放图片
origin:原始图片居中显示
contain 缩放图片使其完全装入image组件，可能背景部分区域空白
cover:缩放图片使其完全填充image组件，可能图片部分区域被裁剪
gifRepeatCountNumber0Gif默认播放次数
0 代表无限重复

样式 ​

通用样式，可参考样式介绍

事件 ​

通用事件，可参考事件介绍

示例 ​


Tenon Vue ​

html
<!-- App.vue -->
<template>
  <image 
    style="width:200hm;" 
    src="https://pt-starimg.didistatic.com/static/starimg/img/9E6O0ZOwok1604372834424.png">
  </image>
</template>
<script>
  export default{}
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

jsx
import React from "react"

import Tenon from "@hummer/tenon-react"

function ImageApp() {
  return (
    <view>
      <image 
        style="width:200hm;" 
        src="https://pt-starimg.didistatic.com/static/starimg/img/9E6O0ZOwok1604372834424.png">
      </image>
    </view>
  );
}

Tenon.render(<ImageApp />)

更多用法，可参考Tenon React 官方示例。