退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 图片组件

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

在代码中请使用 <image> 标签, <img> 的存在只是因为兼容性原因,在将来的版本中可能删除。
<image> 必须指定样式中的宽度和高度。
<image> 不支持内嵌子组件。

# 基本用法

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

# 样式


支持**通用样式**。
width, height 和 src必须被提供,否则图片无法渲染。


# 属性

# resize

contain:缩放图片以完全装入<image>区域,可能背景区部分空白。 (示例)
cover:缩放图片以完全覆盖<image>区域,可能图片部分看不见。 (示例)
stretch:默认值. 按照<image>区域的宽高比例缩放图片。(示例)
resize属性和background-size的理念很相似。

# src

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


如何展示一个未知或者动态宽度高度的图片?

示例1 单个图片

<template>
	<div>
		<image 
			:style="{width:width+'px', height:height+'px'}" 
			src="http://static.hcoder.net/graceui/logoN.png" 
			resize="stretch" @load="imgLoad"></image>
	</div>
</template>
<script>
export default {
	data() {
		return {
			width  : 500,
			height : 300
		}
	},
	methods: {
		imgLoad(e) {
			console.log(e);
			this.height = e.size.naturalHeight / e.size.naturalWidth * this.width;
			console.log(this.height);
		}
	},
}
</script>
<style scoped>
</style>


多图片循环示例

<template>
	<div>
		<image v-for="(img, index) in imgs" :key="index" 
			:style="{width:img.w+'px', height:img.h+'px'}" 
			:src="img.url" :index="index" 
			resize="stretch" @load="imgLoad"></image>
	</div>
</template>
<script>
export default {
	data() {
		return {
			imgs : [
				{url : "http://static.hcoder.net/graceui/logoN.png", w:500, height:300},
				{url : "http://static.hcoder.net/graceui/banner1.png", w:500, height:300}
			]
		}
	},
	methods: {
		imgLoad(e){
			var width = e.size.naturalWidth;
			var height = e.size.naturalHeight;
			var index  = e.currentTarget.attr.index;
			var newItem = this.imgs[index];
			newItem.w = 350;
			newItem.h = height / width * 350;
			this.imgs.splice(index, 1, newItem);
		}
	},
}
</script>
<style scoped>
</style>