文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
<image>
简介
<image>
用于在界面中显示单个图片。
TIP
- 在代码中请使用
<image>
标签,<img>
的存在只是因为兼容性原因,在将来的版本中可能删除。 - Weex 没有内置的图片库,因为一些开源项目如 SDWebImage 和Picasso已经能很好的解决这个问题, 所以在使用
<image>
之前,请在 native 侧先接入相应的 adapter 或者 handler。参见: Android adapter 和 iOS handler。 <image>
必须指定样式中的宽度和高度。<image>
不支持内嵌子组件。
基本用法
<image style="width:500px;height:500px" src="https://vuejs.org/images/logo.png"></image>
参见示例。
子组件
<image>
不支持子组件。
样式
支持**通用样式**。
WARNING
width
, height
和 src
必须被提供,否则图片无法渲染。
属性
属性名 | 类型 | 值 | 默认值 |
---|---|---|---|
placeholder | String | {URL / Base64} | - |
resize | String | cover / contain / stretch | stretch |
src | String | {URL / Base64 } | - |
quality | String | original/normal/low/high/auto | - |
autoBitmapRecycle Android | Boolean | {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 });
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论