图片 Image

对应 Arco Image，点击预览图片可打开对应 ImagePreview 场景。 属性用法见 Element Plus 文档。

图片预览

使用本地图片和 preview-src-list，点击图片打开预览。

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

填充方式

fit 保留 Element Plus 的不同缩放和裁剪语义。

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>

与 Arco 的差异

• 预览工具栏图标种类和数量与 Arco 不同。
• 加载失败默认只显示文字，Arco 显示图标和替代文本。