AImage

AImage is a lazy-loading image component. It renders its src as a background image with controllable size, position, and repeat, and exposes loading and error slots so you can customize those states.

Import

import { Image } from '@any-design/anyui/vue';
// React:  import { Image } from '@any-design/anyui/react';
// Svelte: import { Image } from '@any-design/anyui/svelte';

Basic usage

<template>
  <AImage src="/og-image.png" width="320" height="200" />
</template>

Examples

Fixed dimensions with cover

size, position, and repeat map to the corresponding background-* CSS properties. cover (the default) fills the box without distortion.

<template>
  <AImage src="/og-image.png" width="400" height="240" size="cover" />
</template>

Custom loading state

The loading slot renders while the image is being fetched.

<template>
  <AImage src="/og-image.png" width="320" height="200">
    <template #loading>
      <div style="display:flex;justify-content:center;padding:80px">
        <ASpinner />
      </div>
    </template>
  </AImage>
</template>

Custom error state

The error slot renders when the image fails to load.

<template>
  <AImage src="/this-image-does-not-exist.jpg" width="320" height="200">
    <template #error>
      <AEmpty text="Image not found" />
    </template>
  </AImage>
</template>

Props

Prop	Type	Default	Description
src	String	undefined	Image URL.
width	String | Number	‘100%’	Width.
height	String | Number	‘100%’	Height.
size	String	‘cover’	background-size value.
position	String	‘center’	background-position value.
repeat	String	‘no-repeat’	background-repeat value.
threshold	Number	—	IntersectionObserver threshold (library default).

Slots

Slot	Props	Description
loading	—	Shown while loading.
error	—	Shown on error.

AImage

AImage 是支持懒加载的图片组件。它将 src 作为背景图渲染，可控制 size、position 与 repeat，并提供 loading 与 error 插槽以自定义这些状态。

引入

import { Image } from '@any-design/anyui/vue';
// React:  import { Image } from '@any-design/anyui/react';
// Svelte: import { Image } from '@any-design/anyui/svelte';

基础用法

<template>
  <AImage src="/og-image.png" width="320" height="200" />
</template>

示例

固定尺寸与 cover

size、position、repeat 分别对应 background-* CSS 属性。cover（默认）填充区域且不变形。

<template>
  <AImage src="/og-image.png" width="400" height="240" size="cover" />
</template>

自定义加载态

loading 插槽在图片加载过程中渲染。

<template>
  <AImage src="/og-image.png" width="320" height="200">
    <template #loading>
      <div style="display:flex;justify-content:center;padding:80px">
        <ASpinner />
      </div>
    </template>
  </AImage>
</template>

自定义错误态

error 插槽在图片加载失败时渲染。

<template>
  <AImage src="/this-image-does-not-exist.jpg" width="320" height="200">
    <template #error>
      <AEmpty text="图片未找到" />
    </template>
  </AImage>
</template>

属性

属性	类型	默认值	说明
src	String	undefined	图片地址。
width	String | Number	‘100%’	宽度。
height	String | Number	‘100%’	高度。
size	String	‘cover’	background-size 值。
position	String	‘center’	background-position 值。
repeat	String	‘no-repeat’	background-repeat 值。
threshold	Number	—	IntersectionObserver 阈值（使用库默认值）。

插槽

插槽	作用域参数	说明
loading	—	加载中显示。
error	—	出错时显示。