Preview Updated 2026-05-10

Image

Image container with loading placeholder, error fallback, and lazy loading.

Basic usage

Shows a skeleton shimmer while loading; on onerror switches to fallback (or an error icon placeholder if none provided). lazy is on by default and uses native loading="lazy".

背景

<script setup lang="ts">
import { CfImage } from '@chufix-design/vue';
</script>

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <CfImage
      src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=320&h=180&fit=crop"
      alt="风景"
      :width="160"
      :height="100"
      rounded
      bordered
    />
    <CfImage
      src="https://example.com/broken-image.jpg"
      alt="加载失败示例"
      :width="160"
      :height="100"
      rounded
      bordered
    />
  </div>
</template>

<script setup>
import { CfImage } from '@chufix-design/vue';
</script>

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <CfImage
      src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=320&h=180&fit=crop"
      alt="风景"
      :width="160"
      :height="100"
      rounded
      bordered
    />
    <CfImage
      src="https://example.com/broken-image.jpg"
      alt="加载失败示例"
      :width="160"
      :height="100"
      rounded
      bordered
    />
  </div>
</template>

<CfImage src="/photo.jpg" alt="Scenery" width={160} height={100} rounded bordered />
<CfImage src="/broken.jpg" alt="Failed to load" width={160} height={100} rounded bordered />

<CfImage src="/photo.jpg" alt="Scenery" width={160} height={100} rounded bordered />
<CfImage src="/broken.jpg" alt="Failed to load" width={160} height={100} rounded bordered />

API

Prop	Type	Default	Description
`src`	`string`	`—`	Image URL (required)
`alt`	`string`	`''`	Alt text
`width` / `height`	`number \| string`	`—`	Container size
`fit`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`	object-fit behavior
`rounded`	`boolean`	`false`	Rounded container
`bordered`	`boolean`	`false`	Outline border
`fallback`	`string`	`—`	Fallback image URL on load failure
`lazy`	`boolean`	`true`	Enable native lazy loading
`loading`	`'lazy' \| 'eager'`	`—`	Force the `loading` attribute