image

概述

用于渲染图片。

使用限制

子组件

不支持。

属性

除了支持 通用属性 以外，还支持如下属性。

当image作为ad-native-view的一级子组件时 src、adfield、adIndex加载图片资源的优先级为adfield > adIndex > src

样式

<image> 支持active伪类，除了支持 通用样式 以外，还支持如下样式。

resize-mode 类型说明：

object-fit(1035+)和 alt-object-fit (1090+)类型说明：

事件

<image> 除了支持 通用事件 以外，还支持如下事件。

方法

示例代码

<template>
  <div class="doc-page">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>
    <div class="item-container">
      <text class="item-title">Remote
        image:https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1</text>
      <div class="item-content">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" class="image" style="object-fit: cover"></image>
      </div>
    </div>
    <!-- 指定图片的style宽度高度：750px,250px -->
    <div class="img-layout-header">
      <text>指定图片的style宽度高度：750px,250px</text>
    </div>
    <div class="item-container">
      <text class="item-title">object-fit: cover(默认值)</text>
      <div class="item-content-with-height">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" class="fixed-size-wh"
          style="object-fit: cover"></image>
      </div>
    </div>
    <div class="item-container">
      <text class="item-title">object-fit: contain</text>
      <div class="item-content-with-height">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" class="fixed-size-wh"
          style="object-fit: contain"></image>
      </div>
    </div>
    <div class="item-container">
      <text class="item-title">object-fit: fill</text>
      <div class="item-content-with-height">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" class="fixed-size-wh"
          style="object-fit: fill"></image>
      </div>
    </div>
    <div class="item-container">
      <text class="item-title">object-fit: none</text>
      <div class="item-content-with-height">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" class="fixed-size-wh"
          style="object-fit: none"></image>
      </div>
    </div>
    <div class="item-container">
      <text class="item-title">object-fit: scale-down</text>
      <div class="item-content-with-height">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" class="fixed-size-wh"
          style="width: 100px;height: 100px;object-fit: scale-down;"></image>
      </div>
    </div>
    <!-- 网络图片获取状态回调 -->
    <div class="img-layout-header">
      <text>网络图片获取状态回调： </text>
    </div>
    <input class="input-text" type="text" onchange="onImageUrlChange" value="{{inputImageURL}}"></input>
    <input class="input-button" type="button" onclick="onImageGetClick" value="获取图片"></input>
    <div class="item-container">
      <text class="item-title">网络图片</text>
      <div class="item-content-without-height">
        <image src="{{requestImageURL}}" style="object-fit: contain" oncomplete="onImageComplete" onerror="onImageError"></image>
      </div>
    </div>
  </div>
</template>
<style>
  .doc-page {
    flex: 1;
    flex-direction: column;
  }
  .img-layout-header {
    padding: 20px;
    border-bottom: 1px #808080;
  }
  .item-container {
    margin-top: 40px;
    margin-bottom: 40px;
    flex-direction: column;
  }
  .item-title {
    padding-left: 30px;
    padding-bottom: 20px;
    color: #aaaaaa;
  }
  .item-content {
    height: 200px;
    justify-content: center; 
  }
  .image {
    width: 240px;
    height: 160px;
    object-fit: contain;
  }
  .item-content-with-height {
    height: 250px;
    justify-content: center;
    align-items: center;
  }
  .item-content-with-height-bk {
    height: 250px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
  .item-content-without-height {
    justify-content: center;
    align-items: center;
  }
  .fixed-size-wh {
    width: 750px;
    height: 250px;
  }
  .fixed-size-wh2 {
    width: 250px;
    height: 750px;
  }
  .fixed-size-h {
    height: 160px;
  }
  .circle {
    border-radius: 80px;
  }
  .input-button {
    flex: 1;
    padding: 10px 30px;
    margin: 0px 30px;
    font-size: 30px;
    color: #ffffff;
    background-color: #0faeff;
  }
  .input-text {
    height: 80px;
    line-height: 80px;
    padding: 0px 30px;
    margin: 30px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: #999999;
    font-size: 30px;
    background-color: #ffffff;
  }
</style>
<script>
  import prompt from '@system.prompt'
  export default {
    private: {
      componentName: 'image',
      inputImageURL: 'https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1',
      requestImageURL: ''
    },
    onInit() {
      this.$page.setTitleBar({ text: 'Image' })
    },
    onImageUrlChange(data) {
      this.inputImageURL = data.value
    },
    onImageGetClick() {
      this.requestImageURL = this.inputImageURL
      prompt.showToast({
        message: '加载' + this.requestImageURL + '图片'
      })
    },
    onImageComplete(data) {
      prompt.showToast({
        message: '图片获取成功\n' + '高度：' + data.height + 'px  ' + '宽度：' + data.width + 'px'
      })
    },
    onImageError() {
      prompt.showToast({
        message: '图片获取失败'
      })
    }
  }
</script>

效果图如下：

作为text、span、a 的子组件使用

[h2]概述

从1100版本开始，text、a、span组件支持image作为子组件。 此时image组件支持的属性样式会有所不同，如下。

[h2]子组件

不支持。

[h2]属性

支持如下属性。

[h2]样式

支持如下样式。

[h2]事件

不支持。

[h2]方法

不支持。

版本更新说明

相关链接

[h2]FAQ

为何快应用项目推送到设备会白屏？

[h2]案例

• 如何实现长按图片保存到相册
• image组件实现图片切换动画效果异常