FaImage

Enables lazy loading, image preview and Teleport by default, and adds image-service URL conversion and the complete Viewer slots.

View code

<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 Complete API

Props (24)

Fast and Element Plus 2.14.6 props are merged below. Fast changes appear first; native props that are not forwarded remain visible for compatibility review.

Property	Source	Description	Type	Default
`hideOnClickModal`	Fast override	Close image preview when its overlay is clicked.	`Boolean`	Fast`true`EL`false`
`src`	Fast override	Image URL or Base64 content.	`String`	Fast`""`EL`""`
`lazy`	Fast override	Enable lazy loading.	`Boolean`	Fast`true`EL`false`
`previewSrcList`	Fast override	Image preview list.	`Array`	Fast`[]`EL`[]`
`previewTeleported`	Fast override	Append image preview to body.	`Boolean`	Fast`true`EL`false`
`base64`	Fast addition	Interpret the value as Base64 image content.	`Boolean`	`false`
`original`	Fast addition	Use the original image URL.	`Boolean`	`false`
`normal`	Fast addition	Use the standard-image URL suffix.	`Boolean`	`false`
`small`	Fast addition	Use the small-image URL suffix.	`Boolean`	`false`
`thumb`	Fast addition	Use the thumbnail URL suffix.	`Boolean`	`false`
`preview`	Fast addition	Allow image preview.	`Boolean`	`true`
`fit`	EL native	How content fits its container.	`String`	`""`
`loading`	EL native	Loading state.	`String`	`—`
`scrollContainer`	EL native	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 native	set image preview z-index.	`Number`	`—`
`initialIndex`	EL native	initial preview image index, less than the length of url-list.	`Number`	`0`
`infinite`	EL native	whether the viewer preview is infinite.	`Boolean`	`true`
`closeOnPressEscape`	EL native	whether the image-viewer can be closed by pressing ESC.	`Boolean`	`true`
`zoomRate`	EL native	the zoom rate of the image viewer zoom event.	`Number`	`1.2`
`scale`	EL native	the preview image scale.	`Number`	`1`
`minScale`	EL native	the min scale of the image viewer zoom event.	`Number`	`0.2`
`maxScale`	EL native	the max scale of the image viewer zoom event.	`Number`	`7`
`showProgress`	EL native	whether to display the preview image progress content.	`Boolean`	`false`
`crossorigin`	EL native	native attribute crossorigin.	`String`	`—`

Events（5）

Name	Source	Description	Parameters / type
`load`	EL native	Resource loading succeeds.	`—`
`error`	EL native	Resource loading or component processing fails.	`—`
`switch`	EL native	Image viewer switches images.	`—`
`close`	EL native	Closing flow completes.	`—`
`show`	EL native	Image viewer appears.	`—`

Slots（7）

Name	Source	Description	Parameters / type
`placeholder`	EL native	Placeholder during image loading.	`—`
`error`	EL native	Custom validation-error or image-load-error content.	`—`
`viewer({ src })`	EL native	Custom image-viewer content.	`({ src })`
`progress`	EL native	Custom image-loading progress content.	`—`
`toolbar`	EL native	Custom image-preview toolbar.	`—`
`viewer-error`	EL native	Custom image-viewer load-error content.	`—`
`image viewer slots`	EL native · not forwarded	when you allow big image preview, image viewer slots all can be used.	`—`

Expose（1）

Name	Source	Description	Parameters / type
`showPreview`	EL native	Opens the ElImage viewer.	`—`

FaImage instance methods

`showPreview` Preview

Manually opens the image preview.

Signature

showPreview(): void;

Example

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>

Input

This method has no input parameters.

Returns

Value	Type	Description
`result`	`void`	No return value.

FaImage ​

FaImage Complete API

FaImage instance methods ​

showPreview Preview ​

Signature ​

Example ​

Input ​

Returns ​