图片

图片展示组件

<z-image width="200" height="200" :src="image" />

data() {
	return {
		image: 'https://cdn.zebraui.com/zebra-ui/images/demo.jpg',
	}
},

与uniapp的image组件保持一致

<z-image :mode="fit" width="100%" height="200" :src="image" />

data() {
	return {
		fits: ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix'],
	}
},

使用round属性即可将图片变为圆形

<z-image round :mode="fit" width="100%" height="200" :src="image" />

图片分为加载中的提示，和加载失败的提示。当然，你也可以使用插槽自定义提示。

加载中

<z-image width="100%" height="27vw" />

自定义

<z-image width="100%" height="27vw" use-loading-slot>
	<template #loading>
		<z-loading type="spinner" size="40" />
	</template>
</z-image>

加载失败

<z-image width="100%" height="27vw" src="x" />

自定义

<z-image width="100%" height="27vw" src="x" use-error-slot>
	<template #error>加载失败</template>
</z-image>

参数	说明	类型	默认值
width	图片宽度	string\|number	`100%`
height	图片高度	string\|number	`auto`
radius	图片圆角尺寸	string\|number	`0`
round	图片是否展示为圆形	boolean	`false`
src	图片路径	string	-
mode	图片裁剪、缩放的模式，可选值与与 uniapp 中的图片保持一致	string	`aspectFill`
lazy-load	图片懒加载。只针对 page 与 scroll-view 下的 image 有效	boolean	`false`
show-menu-by-longpress`微信小程序`	开启长按图片显示识别小程序码菜单	boolean	`false`
show-loading	是否展示图片加载中提示	boolean	`true`
use-loading-slot	是否使用 loading 插槽	boolean	`false`
show-error	是否展示图片加载失败提示	boolean	`true`
use-error-slot	是否使用 error 插槽	boolean	`false`

名称	说明	Bindings
loading	loading 插槽
error	图片加载失败插槽