Comment ajouter une image à un modèle builder PDFMonkey ?

Glissez un bloc Image depuis le panneau Blocks sur le canevas. Dans l’onglet Settings, vous pouvez coller une URL statique, uploader un fichier depuis votre ordinateur, ou lier la source à une variable de vos données de document pour des images dynamiques.

Peut-on utiliser des images dynamiques qui changent par document dans PDFMonkey ?

Oui. Cliquez sur le bouton du navigateur de variables (icône accolades) dans le panneau Image Settings et sélectionnez un chemin de données comme company.logo ou user.avatar_url. Chaque document généré récupérera son image depuis les données du payload que vous fournissez.

Quelle est la taille de fichier recommandée pour les images uploadées dans PDFMonkey ?

Maintenez les images uploadées en dessous de 200 Ko. Les fichiers uploadés sont intégrés sous forme de data URI dans le modèle, les images volumineuses augmentent donc la taille du modèle et ralentissent à la fois la sauvegarde et la génération PDF. Pour les images plus lourdes, hébergez-les sur un serveur et utilisez une URL à la place.

Comment ajouter une image d'arrière-plan à un élément dans le builder PDFMonkey ?

Sélectionnez n’importe quel élément, basculez vers l’onglet Styles et développez la section Background. Définissez une URL d’image d’arrière-plan ou une liaison de données, puis configurez les paramètres de repeat, size et position pour contrôler l’affichage de l’image derrière le contenu de l’élément.

Images

Les images sont parmi les éléments les plus courants dans les modèles PDF : logos, photos de produits, avatars, graphiques. Le builder vous offre trois façons de définir une source d’image : coller une URL, uploader un fichier, ou lier la source à une variable de vos données de document.

Ajouter un bloc Image

Ouvrez le panneau Blocks sur le côté gauche du builder et cherchez dans la catégorie Content. Faites glisser un bloc Image sur le canevas ou cliquez dessus pour l’ajouter à l’intérieur du conteneur actuellement sélectionné.

Le bloc Image sélectionné dans la liste des blocs

Lorsque vous sélectionnez le bloc Image, le panneau droit bascule vers l’onglet Settings où vous trouverez la section Image Settings avec un champ de saisie d’URL.

Définir la source de l’image

La section Image Settings affiche un champ de saisie d’URL avec deux boutons à droite : un bouton navigateur de variables (icône accolades) et un bouton upload (icône upload).

Le panneau Image Settings montrant le champ URL avec les boutons navigateur de variables et upload

URL statique

Saisissez ou collez une URL complète (commençant par https://) directement dans le champ de saisie et appuyez sur Entrée ou cliquez ailleurs. L’image se charge immédiatement dans l’aperçu du canevas.

https://example.com/logo.png

Comptes payants uniquement

Inclure des images via leur URL n’est possible que sur un compte payant ou pendant la période d’essai. Les documents contenant des images externes échoueront sur un compte gratuit. Consultez Ressources externes pour la liste complète.

Uploader un fichier

Cliquez sur le bouton upload (icône upload) pour ouvrir un sélecteur de fichiers. Sélectionnez un fichier image depuis votre ordinateur. Le builder le convertit en URI de données et l’intègre directement dans le modèle.

Attention à la taille des fichiers

Les images uploadées sont intégrées en tant qu’URI de données dans le modèle. Les images volumineuses :

augmentent la taille du modèle,
ralentissent la génération PDF,
rendent la sauvegarde du modèle sensiblement plus lente puisque l’intégralité du contenu est envoyée à chaque fois.

Gardez les images uploadées sous 200 Ko dans la mesure du possible. Pour les images plus grandes, hébergez-les sur un serveur et utilisez une URL statique à la place.

Après l’upload, le champ de saisie est remplacé par un aperçu miniature de l’image avec des boutons pour la remplacer ou la supprimer.

Liaison dynamique

Cliquez sur le bouton navigateur de variables (icône accolades) pour ouvrir une liste déroulante affichant tous les chemins de données disponibles depuis vos données de test. Sélectionnez un chemin qui contient une URL d’image (par exemple, company.logo ou user.avatar_url).

La liste déroulante du navigateur de variables montrant les chemins de données disponibles

Vous pouvez également saisir un chemin de variable directement dans le champ. Le builder détecte automatiquement qu’une valeur comme company.logo est une liaison de données (pas une URL) et la traite en conséquence.

Le navigateur de variables n’affiche que les chemins qui existent dans vos données de test actuelles. Si vous ne voyez pas le chemin dont vous avez besoin, ouvrez l’éditeur de données de test et ajoutez le champ correspondant avec un exemple d’URL d’image.

Images d’arrière-plan

N’importe quel élément dans le builder (pas seulement les blocs Image) peut avoir une image d’arrière-plan. Sélectionnez un élément, basculez vers l’onglet Styles dans le panneau droit et développez la section Background (Arrière-plan).

La section Background inclut :

Paramètre	Ce qu’il contrôle
Background Color	Couleur unie derrière l’élément
Background Image	Une URL d’image ou une liaison de données pour l’arrière-plan
Background Repeat	Si l’image se répète en mosaïque (`repeat`, `no-repeat`, etc.)
Background Size	Comment l’image s’adapte (`cover`, `contain`, ou une taille spécifique)
Background Position	Où l’image s’ancre (`center`, `top left`, etc.)

Utilisez les images d’arrière-plan lorsque vous avez besoin d’une image derrière d’autres contenus (par exemple, un filigrane, un en-tête décoratif ou un motif d’arrière-plan pleine page).

Conseils pour travailler avec les images

Gardez des tailles de fichier raisonnables. Les images volumineuses ralentissent la génération PDF. Redimensionnez et compressez les images avant de les utiliser.
Utilisez des URL pour les images qui changent. Si l’image diffère par document (un logo client, une photo de produit), utilisez une liaison dynamique pour que chaque PDF généré récupère la bonne image depuis vos données.
Utilisez les uploads pour les images fixes. Si l’image est toujours identique d’un document à l’autre (le logo de votre entreprise à une taille fixe), l’upload simplifie les choses et évite les dépendances externes.
Vérifiez le CORS pour les URL externes. Les images chargées depuis des serveurs externes doivent autoriser les requêtes cross-origin. Si une image ne s’affiche pas dans le PDF généré, vérifiez si le serveur d’hébergement supporte le CORS.

Questions fréquentes

Comment ajouter une image à un modèle builder PDFMonkey ?: Glissez un bloc Image depuis le panneau Blocks sur le canevas. Dans l’onglet Settings, vous pouvez coller une URL statique, uploader un fichier depuis votre ordinateur, ou lier la source à une variable de vos données de document pour des images dynamiques.
Peut-on utiliser des images dynamiques qui changent par document dans PDFMonkey ?: Oui. Cliquez sur le bouton du navigateur de variables (icône accolades) dans le panneau Image Settings et sélectionnez un chemin de données comme company.logo ou user.avatar_url. Chaque document généré récupérera son image depuis les données du payload que vous fournissez.
Quelle est la taille de fichier recommandée pour les images uploadées dans PDFMonkey ?: Maintenez les images uploadées en dessous de 200 Ko. Les fichiers uploadés sont intégrés sous forme de data URI dans le modèle, les images volumineuses augmentent donc la taille du modèle et ralentissent à la fois la sauvegarde et la génération PDF. Pour les images plus lourdes, hébergez-les sur un serveur et utilisez une URL à la place.
Comment ajouter une image d'arrière-plan à un élément dans le builder PDFMonkey ?: Sélectionnez n’importe quel élément, basculez vers l’onglet Styles et développez la section Background. Définissez une URL d’image d’arrière-plan ou une liaison de données, puis configurez les paramètres de repeat, size et position pour contrôler l’affichage de l’image derrière le contenu de l’élément.