Image

Matches Arco Image; clicking a previewable image opens the ImagePreview use case. See the Element Plus docs for props.

Image Preview

Use a local image and preview-src-list; click it to open the viewer.

<script setup lang="ts">
import landscape from '../assets/landscape.svg'
</script>

<template>
  <el-image :src="landscape" :preview-src-list="[landscape]" fit="cover" style="width: 240px; height: 150px" />
</template>

Image Fit

Fit retains Element Plus's distinct scaling and cropping behavior.

fill

contain

cover

none

scale-down

<script setup lang="ts">
import landscape from '../assets/landscape.svg'

const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const
</script>

<template>
  <div v-for="fit in fits" :key="fit">
    <el-image :src="landscape" :fit="fit" style="width: 120px; height: 120px" />
    <el-text tag="p">{{ fit }}</el-text>
  </div>
</template>

Differences from Arco

• Preview toolbar icons and their number differ from Arco.
• The default error state shows text, while Arco includes an icon and alt text.