Image

Affichez des images avec prévisualisation et support de repli.

Import

import { Image } from 'asterui'

Exemples

Image basique

Affichage d'image simple avec les props src et alt.

</>

import { Image } from 'asterui'

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

export default App

Différentes tailles

Images avec différentes dimensions.

</>

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

Prévisualisation d'image

Cliquez sur l'image pour la prévisualiser en taille réelle.

</>

import { Image } from 'asterui'

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

export default App

Image de repli

Affichez une image de repli lorsque la source ne parvient pas à se charger.

</>

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

Propriété	Description	Type	Par défaut
src	URL de la source de l’image	string	-
alt	Texte alternatif pour l’image	string	''
width	Largeur de l’image	number | string	-
height	Hauteur de l’image	number | string	-
preview	Activer le clic pour prévisualiser l’image dans une lightbox	boolean	true
fallback	URL de l’image de repli lorsque la source échoue	string	-
placeholder	Contenu d’espace réservé affiché pendant le chargement	React.ReactNode	-
onLoad	Callback lorsque l’image se charge avec succès	() => void	-
onError	Callback lorsque l’image échoue à se charger	() => void	-
className	Classes CSS supplémentaires	string	-
style	Styles en ligne	React.CSSProperties	-

Accessibilité

• Fournissez toujours un texte alt significatif pour les lecteurs d’écran
• Utilisez des images de repli pour garantir que le contenu est toujours visible
• La prévisualisation est accessible au clavier : appuyez sur Entrée ou Espace pour ouvrir, Échap pour fermer
• Les images prévisualisables ont role="button" avec un aria-label approprié
• La modale de prévisualisation a role="dialog" et aria-modal="true"
• L’état d’erreur inclut un aria-label décrivant l’échec