Image - DsfrPicture

Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégrés à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.

🏅 La documentation sur les contenus médias sur le DSFR

La story sur le contenu média image (picture) sur le storybook de VueDsfr

🌟 Introduction

Le composant DsfrPicture permet d'afficher une image de manière responsive, avec une légende optionnelle. Il est conçu pour être flexible, offrant des options pour personnaliser la taille, le ratio, et le contenu de l'image. Ce composant est idéal pour intégrer des images dans une interface utilisateur tout en garantissant leur adaptabilité et accessibilité.

Le DsfrPicture utilise une structure HTML sémantique avec <figure> et <figcaption> pour améliorer l'accessibilité. Il applique des classes CSS conditionnelles pour ajuster la taille et le ratio de l'image en fonction des props fournies. Le slot par défaut permet une personnalisation avancée du contenu de l'image.

📐 Structure

• <DsfrPicture> : Le composant principal.
  • Affiche une image avec un ratio et une taille personnalisés.
  • Inclut une légende sous l'image.
  • Utilise un slot pour permettre l'insertion d'un contenu personnalisé, comme un SVG.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
alt	string	Texte alternatif pour l'image, utilisé pour l'accessibilité.	''
legend	string	Légende à afficher sous l'image.	''
size	'small' | 'medium' | 'large'	Taille de l'image (petite, moyenne, ou grande).	'medium'
src	string	URL de l'image à afficher.	obligatoire
title	string	Titre de l'image, affiché au survol.	''
ratio	string	Ratio de l'image (par exemple, '16x9').	'16x9'

📡 Événements

Ce composant ne déclenche pas d'événements spécifiques.

🧩 Slots

• default : Slot pour insérer un contenu personnalisé (comme une image SVG). Si aucun contenu n'est fourni, l'image spécifiée par src est utilisée.

📝 Exemples

Démo

Code de la démo

<script lang="ts" setup>
import DsfrPicture from '../DsfrPicture.vue'

const size = 'medium'
const src = 'https://loremflickr.com/300/200/cat'
const alt = ''
const title = 'Photographie d’un chaton'
const legend = 'Photographie d’un chaton'
const ratio = '16x9'
</script>

<template>
  <DsfrPicture
    :src="src"
    :alt="alt"
    :title="title"
    :legend="legend"
    :size="size"
    :ratio="ratio"
    style="max-width: 500px"
  />
</template>

⚙️ Code source du composant

DsfrPicture.vue

<script lang="ts" setup>
import type { DsfrPictureProps } from './DsfrMedia.types'

export type { DsfrPictureProps }

withDefaults(defineProps<DsfrPictureProps>(), {
  alt: '',
  legend: '',
  title: '',
  size: 'medium',
  ratio: '16x9',
})
</script>

<template>
  <figure
    class="fr-content-media"
    role="group"
    :class="{
      'fr-content-media--sm': size === 'small',
      'fr-content-media--lg': size === 'large',
    }"
    :aria-label="legend"
  >
    <div class="fr-content-media__img">
      <!-- @slot Slot par défaut pour insérer une image personnalisée (SVG ou autre). Par défaut, insère l’image donnée par la props src -->
      <slot>
        <img
          v-if="src"
          :src="src"
          class="fr-responsive-img"
          :class="`fr-ratio-${ratio}`"
          :alt="alt"
          :title="title"
          :ratio="ratio"
        >
      </slot>
    </div>
    <figcaption class="fr-content-media__caption">
      {{ legend }}
    </figcaption>
  </figure>
</template>

DsfrMedia.types.ts

export type DsfrVideoProps = {
  src: string
  legend?: string
  size?: 'small' | 'medium' | 'large'
  transcriptionTitle?: string
  transcriptionContent?: string
  ratio?: string
}

export type DsfrPictureProps = {
  alt?: string
  legend?: string
  size?: 'small' | 'medium' | 'large' | undefined
  src: string
  title?: string
  ratio?: string
}