Image

显示带预览和后备支持的图片。

导入

import { Image } from 'asterui'

示例

基础图片

带 src 和 alt 属性的简单图片显示。

</>

import { Image } from 'asterui'

function App() {
  return (
      <Image
        src="/valley.png"
        alt="Landscape"
        width={400}
        height={300}
      />
    )
}

export default App

不同尺寸

各种尺寸的图片。

</>

import { Image, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Image
          src="/valley.png"
          alt="Small"
          width={100}
          height={100}
        />
        <Image
          src="/valley.png"
          alt="Medium"
          width={200}
          height={150}
        />
        <Image
          src="/valley.png"
          alt="Large"
          width={300}
          height={200}
        />
      </Space>
    )
}

export default App

图片预览

点击图片以全尺寸预览。

</>

import { Image } from 'asterui'

function App() {
  return (
      <Image
        src="/valley.png"
        alt="Landscape with preview"
        width={400}
        height={300}
        preview
      />
    )
}

export default App

后备图片

当源加载失败时显示后备图片。

</>

import { Image, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Image
          src="/does-not-exist.png"
          alt="Broken image"
          width={200}
          height={150}
          fallback="/valley.png"
        />
      </Space>
    )
}

export default App

API

Image

属性	描述	类型	默认值
src	图片源 URL	string	-
alt	图片的替代文本	string	''
width	图片宽度	number | string	-
height	图片高度	number | string	-
preview	启用点击在灯箱中预览图片	boolean	true
fallback	源加载失败时的后备图片 URL	string	-
placeholder	加载时显示的占位符内容	React.ReactNode	-
onLoad	图片成功加载时的回调	() => void	-
onError	图片加载失败时的回调	() => void	-
className	额外的 CSS 类名	string	-
style	内联样式	React.CSSProperties	-

无障碍

• 始终为屏幕阅读器提供有意义的 alt 文本
• 使用后备图片确保内容始终可见
• 预览支持键盘访问：按 Enter 或 Space 打开，Escape 关闭
• 可预览的图片具有 role="button" 和适当的 aria-label
• 预览模态框具有 role="dialog" 和 aria-modal="true"
• 错误状态包括描述失败的 aria-label