返回介绍

<image>

发布于 2020-01-01 14:27:53 字数 6268 浏览 2130 评论 0 收藏 0

简介

<image> 用于在界面中显示单个图片。

TIP

  • 在代码中请使用 <image> 标签, <img> 的存在只是因为兼容性原因,在将来的版本中可能删除。
  • Weex 没有内置的图片库,因为一些开源项目如 SDWebImagePicasso已经能很好的解决这个问题, 所以在使用 <image> 之前,请在 native 侧先接入相应的 adapter 或者 handler。参见: Android adapteriOS handler
  • <image> 必须指定样式中的宽度和高度。
  • <image> 不支持内嵌子组件。

基本用法

<image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>

参见示例

子组件

<image>不支持子组件。

样式

支持**通用样式**。

WARNING

width, heightsrc必须被提供,否则图片无法渲染。

属性

属性名类型默认值
placeholderString{URL / Base64}-
resizeStringcover / contain / stretchstretch
srcString{URL / Base64 }-
qualityStringoriginal/normal/low/high/auto-
autoBitmapRecycleAndroidBoolean{true / false }true

TIP

  • 您可以指定一个相对 bundle URL 的相对路径,相对路径将被重写为绝对资源路径(本地或远程)。参见: 资源路径
  • quality 属性被 WeexSDK 解析但不处理,该参数会直接传给接入的图片下载库,由图片库决定下载什么图片。
  • 当接入的外置图片库支持 quality 属性时,resize 有可能不能按照预期工作,这是因为图片被下载库剪裁了。可以通过指定 "quality='original'" 解决问题。

placeholder

占位图的 URL,在图片下载过程中将展示占位图,图片下载完成后将显示src中指定的图片。 (示例)

resize

  • contain:缩放图片以完全装入<image>区域,可能背景区部分空白。 (示例)
  • cover:缩放图片以完全覆盖<image>区域,可能图片部分看不见。 (示例)
  • stretch默认值. 按照<image>区域的宽高比例缩放图片。(示例)

resize属性和background-size的理念很相似。

src

要显示图片的 URL,该属性是 <image> 组件的强制属性。

支持的图片格式

Weex没有提供必须支持的图片格式列表,主要依赖于你正在使用的图片 adapter 或者 handler。例如,如果你使用 SDWebImage 作为iOS上的图片 handler,你可以使用像 JPEG、PNG、GIF、WebP 等图片格式。

WARNING

Android 默认的Image Adapter不支持 gif。

autoBitmapRecycle

一个布尔标志位控制当图片滚出屏幕时是否回收相关内存。

  • true 当图片不可见时回收图片内存
  • false 当图片不可见时不回收图片内存,这样做会占用更高的内存,但是会提供更好的用户体验。
  • 默认值是true

组件方法

使用 save 方法

<image>标签上增加 ref 属性 (Vue.js Child Component Refs) :

<image ref="poster" src="path/to/image.png"></image>

获取组件引用并使用 save 方法:

const $image = this.$refs.poster
$image.save(result => {
  if (result.success) {
    // Do something to hanlde success
  } else {
    console.log(result.errorDesc)
    // Do something to hanlde failure
  }
})

参见 完整例子.

事件

处理 load 事件

<image> 标签上绑定 load 事件:

<image @load="onImageLoad" src="path/to/image.png"></image>

增加事件处理函数:

export default {
  methods: {
    onImageLoad (event) {
      if (event.success) {
        // Do something to hanlde success
      }
    }
  }
}

参见完整示例

Vue 示例

Rax 示例

rax-image<image> 组件的上层封装,抹平了 Web 和 Weex 的展现

import { createElement, render } from 'rax';
import Driver from "driver-universal";
import Image from 'rax-image';

const App = () => {
 return (
   <Image
     source={{
       uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
     }}
     style={{
       height: '68rpx',
       width: '67rpx'
     }}
  />
 );
};

render(<App />, document.body, { driver: Driver });

rax-image 文档

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文