Composants → bpm.image

bpm.image

Affichage d'image avec chargement différé (lazy) et contrôle du cadrage : visuels produits dans un catalogue, logos partenaires, avatars, illustrations ou captures dans une application data. Le texte alt est obligatoire — il sert d'accessibilité et de repli si l'image ne charge pas.

StableMédia⏱ 2 min
Logo Blueprint Modular
Python
bpm.image(src="/img/logo-bpm.png", alt="Logo Blueprint Modular", width=300, height=200)
PropTypeDéfautRequisDescription
srcstringOuiURL de l'image (chemin serveur ou URL absolue).
altstringOuiTexte alternatif : accessibilité et repli affiché si l'image ne charge pas.
titlestringNonInfobulle affichée au survol.
widthnumber | stringNonLargeur (px si nombre, sinon valeur CSS).
heightnumber | stringNonHauteur (px si nombre, sinon valeur CSS).
fit"contain" | "cover" | "fill" | "none"containNonMode d'ajustement (object-fit) dans la zone width × height.
classNamestringNonClasses CSS additionnelles.

Exemples

# Visuel produit dans une fiche catalogue
bpm.image(src="/img/produits/ref-4821.jpg", alt="Pompe hydraulique REF-4821", width=300, height=200, fit="cover")
# Logo partenaire, sans déformation
bpm.image(src="/img/logo-bpm.png", alt="Logo Blueprint Modular", height=48)
# Illustration pleine largeur dans un rapport
bpm.image(src=chart_png_url, alt="Évolution du CA 2025", width="100%")