# Utiliser des images dans un modèle

Choisissez une image d'actif, affichez-la dans HTML ou utilisez-la comme arrière-plan de page, d'en-tête ou de pied de page.

Une image peut être une partie fixe du design, comme un logo ou un arrière-plan de page. Choisissez une image stockée dans le **Assets** du projet ou utilisez une URL HTTPS pour une image hébergée ailleurs.

Assets conserve les images réutilisables dans le projet et vous permet de les sélectionner directement depuis l'éditeur.

## 1. Sélectionnez une image dans Assets

[Télécharger une image sur Assets](/docs/fr/assets/manage/) dans le projet. Dans l'éditeur, sélectionnez la partie qui nécessite l'image, ouvrez **Props**, ajoutez un accessoire et choisissez **Asset**. Sélectionnez **Sélectionner une image**, ouvrez le dossier et choisissez le fichier.

Par exemple, appelez l'accessoire `logo`. L'application stocke une référence au fichier de projet sélectionné, vous n'avez donc pas besoin de coller une URL de téléchargement dans le modèle.

Le choix d'une image différente pour l'accessoire met à jour les emplacements HTML en utilisant ce même accessoire.

<figure class="doc-sim data-assets-illustration" aria-label="Accessoire d'actif → Sélectionner une image → choisir une image de projet">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Props</strong></div><div class="ds-node"><strong></strong><span class="ds-type">Atout <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ds-pad"><span class="sim-control sim-focus">▧ Sélectionnez l'image</span></div><div class="ds-asset-grid"><div class="ds-asset sim-focus"><div class="ds-thumb"><span>T</span></div><strong>logo.png</strong><small>PNG</small></div><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>couverture.jpg</strong><small>JPG</small></div></div></div></div>
<figcaption>Accessoire d'actif → Sélectionner une image → choisir une image de projet</figcaption>
</figure>

## 2. Afficher l'image dans HTML

Dans la section contenant le prop `logo`, utilisez :

```handlebars
<img src="{{ props.logo }}" alt="Logo" class="logo" />
```

Pour un accessoire de logo **Global**, utilisez `{{ global.props.logo }}`. Définissez ses dimensions dans le CSS de la section :

```css
.logo {
  width: 120px;
  height: 48px;
  object-fit: contain;
}
```

`contain` adapte l'image complète à l'intérieur de la boîte ; `cover` remplit la boîte et peut recadrer le contenu excédentaire. Choisissez le comportement souhaité plutôt que d'étirer l'image dans les deux dimensions.

<figure class="doc-sim data-assets-illustration" aria-label="HTML → props.logo → image">
<div class="sim-stage"><div class="ds-code sim-focus"><code>&lt;img src="{{ props.logo }}"</code><code>     alt="Logo" class="logo" /&gt;</code></div><div class="ds-image-preview"><div class="ds-logo">Tembuilder</div><small>props.logo</small></div></div>
<figcaption>HTML → props.logo → image</figcaption>
</figure>

## 3. Utiliser une image comme arrière-plan

Pour un arrière-plan partagé, ouvrez **Global → Config → Fond de page** et choisissez une image. Pour une seule page, sélectionnez-la, ouvrez **Config → Arrière-plan → Arrière-plan de la page** et activez son propre arrière-plan.

**Taille**, **Position** et **Répétition** contrôlent la manière dont l'image remplit l'arrière-plan. Par exemple, Couverture remplit la zone, Centre la place au milieu et Aucune répétition empêche la mosaïque.

Les en-têtes et pieds de page ont leurs propres paramètres d'arrière-plan dans Config. Voir [En-têtes et pieds de page](/docs/fr/editor/header-footer/) pour ces zones.

<figure class="doc-sim data-assets-illustration" aria-label="Arrière-plan → Image → choisissez la taille et la position">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Fond de page</strong></div><div class="ds-setting"><span>Image</span><span class="sim-control sim-focus">Sélectionnez l'image</span></div><div class="ds-rows"><div><span>Taille</span><small>Couverture</small></div><div><span>Position</span><small>Centre</small></div><div><span>Répéter</span><small>Pas de répétition</small></div></div></div><div class="ds-image-options"><span>contient</span><span>couverture</span></div></div>
<figcaption>Arrière-plan → Image → choisissez la taille et la position</figcaption>
</figure>

## 4. Utilisez une URL d'image externe

Vous pouvez mettre une URL HTTPS directement dans `src` lorsque l'espace de travail autorise les images externes. Il doit renvoyer un **fichier image public**, plutôt qu'une page Web contenant une image ou une URL nécessitant une connexion.

```html
<img src="https://example.com/images/banner.png" alt="" />
```

Les URL d'images externes acceptent **PNG, JPEG, WebP, GIF et AVIF**. À distance **SVG n'est pas pris en charge** ; téléchargez SVG via Assets et sélectionnez-le avec un accessoire Asset. Les URL doivent utiliser HTTPS sur le port **443**, n'avoir aucun nom d'utilisateur/mot de passe intégré et être résolues en adresses publiques ; les redirections sont également vérifiées.

Limites par rendu : **5 Mio par image**, **30 Mio au total**, **100 demandes d'image** et **10 secondes par récupération, redirections comprises**. Une URL publique peut toujours échouer si son format, sa taille ou sa réponse ne respecte pas ces limites. Sur les plans autorisant des images externes, les échecs de récupération font échouer le rendu plutôt que d'omettre silencieusement l'image.

Si une image fonctionne dans un navigateur connecté mais est absente d'un PDF, vérifiez si son URL dépend d'un cookie ou d'une session. Le moteur de rendu doit le récupérer indépendamment de votre navigateur.

Pour les images déjà dans Assets, utilisez le sélecteur d'actifs au lieu de copier une URL d'aperçu. Lorsque l'accès aux ressources n'est pas disponible, l'application affiche le message correspondant ; voir [Limites du plan](/docs/fr/plans/limits/) pour plus de détails sur l'accès à l'espace de travail.

<figure class="doc-sim data-assets-illustration" aria-label="Utilisez une URL qui pointe directement vers un fichier image public">
<div class="sim-stage"><div class="ds-url-box sim-focus"><small>URL de l'image HTTPS</small><code>https://example.com/images/banner.png</code></div><div class="ds-source-path"><span>URL</span><span>→</span><span>Fichier image</span><span>→</span><span>PDF</span></div></div>
<figcaption>Utilisez une URL qui pointe directement vers un fichier image public</figcaption>
</figure>