El Image

Image Component

Image component extends native img with lazy loading, placeholder, error handling, and preview features.

When to Use

• Image display with lazy loading
• Image preview galleries
• Loading placeholders
• Error fallback images

Basic Usage

<template>
  <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />
</template>

<script setup>
const url = 'https://example.com/image.jpg'
</script>

Placeholder

<template>
  <el-image :src="url" fit="cover">
    <template #placeholder>
      <div class="image-slot">Loading...</div>
    </template>
  </el-image>
</template>

Load Failed

<template>
  <el-image :src="invalidUrl">
    <template #error>
      <div class="image-slot">
        <el-icon><icon-picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

Lazy Load

<template>
  <el-image :src="url" lazy />
</template>

Image Preview

<template>
  <el-image
    style="width: 100px; height: 100px"
    :src="url"
    :preview-src-list="srcList"
    :initial-index="0"
    fit="cover"
  />
</template>

<script setup>
const url = 'https://example.com/image1.jpg'
const srcList = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
]
</script>

API Reference

Image Attributes

Image Events

Image Slots

Image Exposes

Best Practices

1. Use lazy for images below the fold
2. Provide placeholder for loading states
3. Use preview-src-list for image galleries