image

Overview

Renders images.

Application Scope

Subelements

None

Attributes

In addition to general attributes, the attributes listed in the following table are supported.

Styles

The image element supports the active pseudo-class. In addition to common styles, the styles listed in the following table are supported.

Types of the resize-mode style

Types of object-fit (1035+) and alt-object-fit (1090+) styles

Events

In addition to common events, the events listed in the following table are supported.

Methods

Sample Code

<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>
    <!-- Specify the height and width of an image style to 750 px and 250 px, respectively. -->
    <div class="img-layout-header">
      <text>Specify the height and width of an image style to 750 px and 250 px, respectively. </text>
    </div>
    <div class="item-container">
      <text class="item-title">object-fit: cover (default value)</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>
    <!-- Callback for web image obtaining status -->
    <div class="img-layout-header">
      <text>Callback for web image obtaining status<text>
    </div>
    <input class="input-text" type="text" onchange="onImageUrlChange" value="{{inputImageURL}}"></input>
    <input class="input-button" type="button" onclick="onImageGetClick" value="Obtain an image."></input>
    <div class="item-container">
      <text class="item-title">Internet image</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: 'Load' + this.requestImageURL + 'Image'
      })
    },
    onImageComplete(data) {
      prompt.showToast({
        message: 'Image obtained.\n' + 'Height:' + data.height + 'px  ' + 'Width:' + data.width + 'px'
      })
    },
    onImageError() {
      prompt.showToast({
        message: 'Failed to obtain the image.'
      })
    }
  }
</script>

The following figure shows the final effect.

Version Change History

Links

[h2]FAQs

Why is a white screen displayed when I push a quick app to a device?

[h2]Cases

• Implementing the Function of Touching and Holding an Image to Save It
• Exception in Image Switchover Using Image Elements