FaImage 图片

默认启用懒加载、图片预览和 Teleport，并提供团队图片地址转换与完整 Viewer 插槽。

查看代码

<template>
	<div class="demo-image-grid">
		<div><FaImage :src="image" original fit="cover" style="width: 100%; height: 140px" /><span>Cover + 点击预览</span></div>
		<div><FaImage :src="image" original fit="contain" style="width: 100%; height: 140px" /><span>Contain</span></div>
		<div>
			<FaImage src="invalid-image" original :preview="false" style="width: 100%; height: 140px">
				<template #error><div class="demo-image-error">自定义加载失败</div></template>
			</FaImage>
			<span>错误插槽</span>
		</div>
	</div>
</template>

<script setup lang="ts">
const image = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><defs><linearGradient id="g"><stop stop-color="#409eff"/><stop offset="1" stop-color="#36cfc9"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/><circle cx="500" cy="80" r="45" fill="#fff" opacity=".65"/><text x="48" y="205" font-size="54" fill="white">Fast.Element.Plus</text></svg>'
)}`;
</script>

FaImage 完整 API

Props 属性 (24)

Fast 与 Element Plus 2.14.6 的属性已合并展示；Fast 修改项优先排列，未透传的原生属性保留用于兼容性核对。

属性	来源	说明	类型	默认值
`hideOnClickModal`	Fast 修改	点击图片预览遮罩时是否关闭预览。	`Boolean`	Fast`true`EL`false`
`src`	Fast 修改	图片地址或 Base64 图片内容。	`String`	Fast`""`EL`""`
`lazy`	Fast 修改	是否启用懒加载。	`Boolean`	Fast`true`EL`false`
`previewSrcList`	Fast 修改	图片预览列表。	`Array`	Fast`[]`EL`[]`
`previewTeleported`	Fast 修改	图片预览层是否挂载到 body。	`Boolean`	Fast`true`EL`false`
`base64`	Fast 新增	将值作为 Base64 图片内容。	`Boolean`	`false`
`original`	Fast 新增	使用原始图片地址。	`Boolean`	`false`
`normal`	Fast 新增	使用标准图地址后缀。	`Boolean`	`false`
`small`	Fast 新增	使用小图地址后缀。	`Boolean`	`false`
`thumb`	Fast 新增	使用缩略图地址后缀。	`Boolean`	`false`
`preview`	Fast 新增	是否允许图片预览。	`Boolean`	`true`
`fit`	EL 原生	内容如何适应容器。	`String`	`""`
`loading`	EL 原生	加载状态。	`String`	`—`
`scrollContainer`	EL 原生	the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load.	`String / Object`	`—`
`zIndex`	EL 原生	set image preview z-index.	`Number`	`—`
`initialIndex`	EL 原生	initial preview image index, less than the length of url-list.	`Number`	`0`
`infinite`	EL 原生	whether the viewer preview is infinite.	`Boolean`	`true`
`closeOnPressEscape`	EL 原生	whether the image-viewer can be closed by pressing ESC.	`Boolean`	`true`
`zoomRate`	EL 原生	the zoom rate of the image viewer zoom event.	`Number`	`1.2`
`scale`	EL 原生	the preview image scale.	`Number`	`1`
`minScale`	EL 原生	the min scale of the image viewer zoom event.	`Number`	`0.2`
`maxScale`	EL 原生	the max scale of the image viewer zoom event.	`Number`	`7`
`showProgress`	EL 原生	whether to display the preview image progress content.	`Boolean`	`false`
`crossorigin`	EL 原生	native attribute crossorigin.	`String`	`—`

Events 事件（5）

名称	来源	说明	参数 / 类型
`load`	EL 原生	资源加载成功时触发。	`—`
`error`	EL 原生	资源加载或组件处理失败时触发。	`—`
`switch`	EL 原生	图片预览器切换当前图片时触发。	`—`
`close`	EL 原生	关闭流程完成时触发。	`—`
`show`	EL 原生	图片预览器显示时触发。	`—`

Slots 插槽（7）

名称	来源	说明	参数 / 类型
`placeholder`	EL 原生	图片加载过程中的占位内容。	`—`
`error`	EL 原生	表单校验错误或图片加载失败时的自定义内容。	`—`
`viewer({ src })`	EL 原生	自定义图片预览器内容。	`({ src })`
`progress`	EL 原生	自定义图片加载进度内容。	`—`
`toolbar`	EL 原生	自定义图片预览工具栏。	`—`
`viewer-error`	EL 原生	图片预览器加载失败时的自定义内容。	`—`
`image viewer slots`	EL 原生 · 未透传	when you allow big image preview, image viewer slots all can be used.	`—`

Expose 暴露（1）

名称	来源	说明	参数 / 类型
`showPreview`	EL 原生	打开 ElImage 图片预览器。	`—`

FaImage 实例方法

`showPreview` 预览

手动打开图片预览。

签名

showPreview(): void;

示例

vue

<template>
	<FaImage ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaImage } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaImage>>();
componentRef.value?.showPreview();
</script>

输入

该方法没有输入参数。

返回值	返回值类型	返回值说明
`result`	`void`	没有返回值。

FaImage 图片 ​

FaImage 完整 API

FaImage 实例方法 ​

showPreview 预览 ​

签名 ​

示例 ​

输入 ​

返回 ​

FaImage 图片

FaImage 实例方法

`showPreview` 预览

签名

示例

输入

返回