图片

图片组件。

基础使用

通过 src 属性设置图片地址。

<template>
	<pure-image src="https://picsum.photos/200/300"></pure-image>
</template>

占位图

通过 placeholder 属性设置占位图。

<template>
	<pure-image
		src="https://picsum.photos/200/300"
		placeholder="/static/placeholder.jpg"
	></pure-image>
</template>

圆形图片

通过 circle 属性设置为圆形图片。

<template>
	<pure-image
		src="https://picsum.photos/200/300"
		circle
	></pure-image>
</template>

圆形图片

• 通过 preview 开启图片预览功能
• 通过 urls 属性设置图片预览的图片列表

<template>
	<pure-grid cols="3">
		<pure-block
			v-for="item in urls"
			:key="item"
		>
			<pure-image
				:src="item"
				:urls="urls"
				width="100%"
				height="100%"
			></pure-image>
		</pure-block>
	</pure-grid>
</template>

<script setup>
	import { ref } from "vue";

	const urls = ref([
		`/static/images/w_1.jpeg`,
		`/static/images/w_2.jpeg`,
		`/static/images/w_3.jpeg`,
		`/static/images/w_4.jpeg`,
		`/static/images/w_5.jpeg`,
		`/static/images/w_6.jpeg`,
		`/static/images/w_7.jpeg`,
		`/static/images/w_8.jpeg`,
		`/static/images/w_9.jpeg`
	]);
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
src	String		图片资源地址
placeholder	String		占位符图片地址
mode	String	aspectFill	裁剪模式 参考
lazyLoad	Boolean	false	图片懒加载 参考
fadeShow	Boolean	true	图片显示动画效果 参考
webp	Boolean	false	在系统不支持 webp 的情况下是否单独启用 webp 参考
showMenuByLongpress	Boolean	false	开启长按图片显示识别小程序码菜单 参考
draggable	Boolean	false	图片是否可拖动 参考
width	String	100%	图片宽度 参考
height	String	100%	图片高度 参考
preview	Boolean	true	图片是否可预览 参考
urls	Array		图片预览地址列表 参考
circle	Boolean	false	是否为圆形样式 参考

事件

名称	参数	说明
onClick		点击事件
onLoad	event	加载事件 参考
onError	event	错误事件 参考

样式变量

名称	说明
--pure-image-width	图片宽度
--pure-image-height	图片高度
--pure-image-border-radius	圆角大小，只在圆形图片时生效