图片 Image

顾名思义，展示图片。

该文档示例中的图片来自 Lorem Picsum。

基础使用

可以设置 src、srcset、alt，和 <img> 标签一样使用。

<template>
	<px-image
		src="https://picsum.photos/id/106/200/100"
		srcset="https://picsum.photos/id/106/400/200 2x, https://picsum.photos/id/106/600/300 3x"
		alt="Image"
		style="width: 200px; height: 100px"
	></px-image>
</template>

适应容器

objectFit 属性设置图片适应容器的方式，效果同 CSS 的 object-fix。

<template>
	<px-space>
		<px-image
			v-for="value in objectFit"
			src="https://picsum.photos/id/106/200/100"
			alt="Image"
			:object-fit="value"
			style="width: 100px; height: 100px"
		></px-image>
	</px-space>
</template>

<script setup lang="ts">
const objectFit = ['fill', 'contain', 'cover', 'none', 'scale-down']
</script>

占位元素和加载失败

placeholder 和 error 分别设置加载中的占位元素和加载失败的展示内容。

Loading...

<template>
	<px-space style="font-size: 0">
		<px-image
			src="https://picsum.photos/id/106/200/100"
			alt="Image"
			style="width: 200px; height: 100px"
		>
			<template #placeholder> Loading... </template>
		</px-image>
		<px-image src="error-url" alt="Image" style="width: 200px; height: 100px">
			<template #error> Error! </template>
		</px-image>
	</px-space>
</template>

懒加载

loading 设置由浏览器实现的原生图片懒加载。lazy 开启基于 IntersectionObserver 的懒加载，root 属性设置 lazy 懒加载可视区域。

为了防止重排发生，减少页面抖动，懒加载时推荐设置图片大小。

Loading Prop

Lazy Prop

<template>
	<px-space>
		<div>
			<h4>Loading Prop</h4>
			<div class="lazy-container-left">
				<px-image
					v-for="value in 10"
					:key="value"
					src="https://picsum.photos/id/106/200/100"
					alt="Image"
					style="width: 100%; height: 100px"
					loading="lazy"
				></px-image>
			</div>
		</div>
		<div>
			<h4>Lazy Prop</h4>
			<div class="lazy-container-right">
				<px-image
					v-for="value in 10"
					:key="value"
					src="https://picsum.photos/id/106/200/100"
					alt="Image"
					style="width: 100%; height: 100px"
					lazy
					root=".lazy-container-righ"
				></px-image>
			</div>
		</div>
	</px-space>
</template>

<style lang="css" scoped>
.lazy-container-left,
.lazy-container-right {
	width: 200px;
	height: 500px;
	font-size: 0;
	overflow: auto;
}
</style>

预览

previewable 开启大图预览，预览图片尺寸基于图片资源的尺寸计算。

<template>
	<px-image
		src="https://picsum.photos/id/106/600/300"
		alt="Image"
		previewable
		style="width: 200px; height: 100px"
	></px-image>
</template>

API

ImageProps

属性	类型	可选	默认值	描述	版本
src	string	是		图片资源地址，行为和原生 <img> 的 src 类似。	0.0.3
srcset	string	是		响应式的图片资源地址，行为和原生 <img> 的 srcset 类似。	0.0.3
alt	string	是		原生 <img> 的 alt 类似。	0.0.3
objectFit	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	是	'fill'	图片适应容器的方式，效果同 CSS 的 object-fix。	0.0.3
loading	'eager' | 'lazy'	是	'eager'	原生的图片懒加载。	0.0.3
lazy	boolean	是	false	图片懒加载，开启后 loading 属性将失效，该属性不具有响应式。	0.0.3
root	HTMLElement | string	是		基于 lazy 属性的图片懒加载，可视区域的元素，为空时为视口，该属性不具有响应式。	0.0.3
rootMargin	number | [number, number]	是	[100, 200]	基于 lazy 属性的图片懒加载，距可视区域距离，该属性不具有响应式。	0.0.3
previewable	boolean	是	false	是否开启大图预览。	0.0.3
maskProps	Omit<MaskProps, 'zIndex'>	是		预览时遮罩的属性。	0.0.3
popupWrapperProps	{ zIndex: number, root: HTMLElement | string }	是		预览时浮动层的属性。	0.0.3
popupWrapperProps	{ maxWidth?: number, maxHeight?: number, margin?: number}	是	{ margin: 32, maxWidth: Infinity, maxHeight: Infinity }	预览时浮动层的属性。	0.0.3
referrerpolicy	string	是	'no-referrer'	原生 <img> 的 referrerpolicy。	0.0.3
crossorigin	'anonymous' | 'use-credentials' | ''	是	''	原生 <img> 的 crossorigin。	0.0.3

ImageEvents

事件	参数	描述	版本
load	img: HTMLImageElement, event: Event	图片加载完成的回调。	0.0.3
error	img: HTMLImageElement, error: string | Event	图片加载失败的回调。	0.0.3
loading	img: HTMLImageElement	lazy 属性的图片懒加载开始加载图片的回调。	0.0.3
preview	event: MouseEvent	开启预览图片的回调。	0.0.3
close	event: MouseEvent	关闭预览图片的回调。	0.0.3

ImageSlots

插槽	参数	描述	版本
placeholder		加载中的占位元素。	0.0.3
error		加载失败的展示内容。	0.0.3