Utiliser des images dans un modèle

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 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.

2. Afficher l’image dans HTML

Dans la section contenant le prop logo, utilisez :

<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 :

.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.

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 pour ces zones.

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.

<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 pour plus de détails sur l’accès à l’espace de travail.