Aller au contenu principal

Images

Les images sont intégrées en ligne dans le texte du paragraphe en utilisant la balise [image]. Elles peuvent apparaître dans les paragraphes, les cellules de tableau, les mises en page en colonnes, les en-têtes et les pieds de page.

Syntaxe en ligne​

[image, chemin, largeur|hauteur]

L'abréviation [img] est également supportée :

[img, chemin, largeur|hauteur]
ParamètreDescription
cheminChemin ou URL du fichier image
`largeurhauteur`

Formats supportés​

FormatExtension
PNG.png
JPEG.jpg, .jpeg
TIFF.tiff, .tif
GIF.gif
SVG.svg

Exemples​

Image dans un paragraphe​

{ "p": "[image, /assets/logo.png, 120|40]" }

Image avec texte environnant​

{ "p": "Approuvé par [image, /assets/signature.png, 80|30] le 30 mars 2026." }

Petite icône en ligne​

{ "p": "[image, /assets/check-icon.png, 12|12] Expédition vérifiée et expédiée." }

Images dans les cellules de tableau​

Placez des images dans les cellules de tableau aux côtés d'autres contenus.

{
  "table": {
    "widths": [1, 3, 1],
    "rows": [
      [
        { "p": "[image, /assets/product-a.png, 50|50]" },
        { "p": "[b]Produit A[/b][br]Conteneur de transport de grade industriel, 40 pieds standard." },
        { "p": "1 200 $" }
      ],
      [
        { "p": "[image, /assets/product-b.png, 50|50]" },
        { "p": "[b]Produit B[/b][br]Conteneur réfrigéré, 20 pieds avec contrôle de température." },
        { "p": "2 800 $" }
      ]
    ]
  }
}

Images dans les mises en page en colonnes​

{
  "columns": {
    "widths": [1, 2],
    "gap": 20,
    "rows": [
      [
        { "p": "[image, /assets/warehouse.png, 150|100]" }
      ],
      [
        { "p": "[b]Centre de distribution de Chicago[/b]" },
        { "p": "Notre installation phare du Midwest traite plus de 50 000 colis par jour avec tri automatisé et stockage climatisé." }
      ]
    ]
  }
}

Images dans les en-têtes​

Les images sont couramment utilisées dans les en-têtes pour les logos de l'entreprise. Combinez avec [tab] pour positionner le logo à gauche et le texte à droite.

{
  "header": {
    "content": [
      {
        "p": "[image, /assets/logo.png, 80|24][tab, 350, 0]Logistique ShipForge"
      }
    ],
    "hr": {
      "borderStyle": "solid",
      "height": 0.5,
      "color": "#CCCCCC"
    }
  }
}

Images avec références de données​

Les chemins d'image peuvent inclure des références $data pour la sélection d'image dynamique.

{ "p": "[image, $data.company.logoUrl, 100|30]" }

Exemple complet​

{
  "document": {
    "styles": {
      "title": { "fontSize": 18, "fontWeight": "bold" },
      "body": { "fontSize": 10, "color": "#333333" }
    },
    "header": {
      "content": [
        { "p": "[image, /assets/shipforge-logo.png, 90|28][tab, 380, 0][color, #999999]Rapport d'expédition[/color]" }
      ],
      "hr": { "borderStyle": "solid", "height": 0.5, "color": "#E0E0E0" },
      "skipPages": [1]
    },
    "content": [
      { "p": "[image, /assets/shipforge-logo.png, 180|56]" },
      { "p": "Rapport d'expédition trimestriel", "style": "title" },
      { "p": "Voici un résumé de nos emplacements de plateforme et de leur débit actuel.", "style": "body" },
      {
        "table": {
          "widths": [1, 2, 2],
          "rows": [
            [
              { "p": "" },
              { "p": "[b]Emplacement[/b]" },
              { "p": "[b]Colis/Jour[/b]" }
            ],
            [
              { "p": "[image, /assets/flag-us.png, 24|16]" },
              { "p": "Chicago, IL" },
              { "p": "52 000" }
            ],
            [
              { "p": "[image, /assets/flag-ca.png, 24|16]" },
              { "p": "Toronto, ON" },
              { "p": "34 000" }
            ],
            [
              { "p": "[image, /assets/flag-gb.png, 24|16]" },
              { "p": "Londres, Royaume-Uni" },
              { "p": "47 000" }
            ]
          ]
        }
      }
    ]
  }
}