Van Skeleton Image

Vant SkeletonImage Component

Image placeholder component for use within custom skeleton layouts.

When to Invoke

Invoke this skill when:

• User needs to create custom skeleton layouts with image placeholders
• User wants to display image loading states
• User asks about skeleton image customization
• User needs standalone image skeleton components

Features

• Size Customization: Configurable image size
• Shape Options: Round or square shapes
• Animation Support: Inherits animation from parent skeleton
• Standalone Usage: Can be used independently in custom layouts

API Reference

Props

Types

import type { SkeletonImageProps, SkeletonImageShape } from 'vant';

CSS Variables

Usage Examples

Basic Usage

<template>
  <van-skeleton-image />
</template>

Custom Size

<template>
  <van-skeleton-image image-size="120px" />
</template>

Square Shape

<template>
  <van-skeleton-image image-shape="square" />
</template>

In Custom Layout

<template>
  <van-skeleton>
    <template #template>
      <div class="card-skeleton">
        <van-skeleton-image image-size="100%" image-shape="square" />
        <div class="content">
          <van-skeleton-title />
          <van-skeleton-paragraph />
        </div>
      </div>
    </template>
  </van-skeleton>
</template>

<style>
.card-skeleton {
  border-radius: 8px;
  overflow: hidden;
}

.content {
  padding: 12px;
}
</style>

Image Gallery Skeleton

<template>
  <div class="gallery-skeleton">
    <van-skeleton-image
      v-for="i in 6"
      :key="i"
      image-size="100%"
      image-shape="square"
    />
  </div>
</template>

<style>
.gallery-skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
</style>

Product Card Skeleton

<template>
  <div class="product-card-skeleton">
    <van-skeleton-image image-size="200px" image-shape="square" />
    <div class="product-info">
      <van-skeleton-paragraph row-width="80%" />
      <van-skeleton-paragraph row-width="40%" />
    </div>
  </div>
</template>

<style>
.product-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Banner Skeleton

<template>
  <div class="banner-skeleton">
    <van-skeleton-image
      :image-size="300"
      image-shape="square"
    />
  </div>
</template>

<style>
.banner-skeleton {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
</style>

Best Practices

1. Match actual image dimensions: Set image-size to match the actual image dimensions
2. Use square for rectangular images: Use image-shape="square" for rectangular images
3. Full width images: Use image-size="100%" for full-width images
4. Combine with other skeleton components: Use with SkeletonTitle and SkeletonParagraph for complete layouts