开发预览更新于 2026-05-10

Image 图片

带加载占位、错误回退、懒加载的图片容器。

基础用法

加载中显示骨架闪烁；onerror 时切换到 fallback（未提供则显示错误图标占位）。lazy 默认开启，使用浏览器原生 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="风景" width={160} height={100} rounded bordered />
<CfImage src="/broken.jpg" alt="加载失败示例" width={160} height={100} rounded bordered />

<CfImage src="/photo.jpg" alt="风景" width={160} height={100} rounded bordered />
<CfImage src="/broken.jpg" alt="加载失败示例" width={160} height={100} rounded bordered />

API

属性	类型	默认值	说明
`src`	`string`	`—`	图片地址（必填）
`alt`	`string`	`''`	替代文本
`width` / `height`	`number \| string`	`—`	容器尺寸
`fit`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`	object-fit 行为
`rounded`	`boolean`	`false`	圆角容器
`bordered`	`boolean`	`false`	描边
`fallback`	`string`	`—`	加载失败时切换到的备用图地址
`lazy`	`boolean`	`true`	是否启用浏览器懒加载
`loading`	`'lazy' \| 'eager'`	`—`	强制指定 `loading` 属性