Image Elements

This page shows how to use the image element in json2doc.

Image Properties & Defaults

Image Element Properties

Property	Type	Required	Description	Default
type	string	✓	Element type: image	-
src	string	✓	Image source: storage URL starting with /image/ or public HTTP/HTTPS URL	-
alt	string	✗	Alternative text for accessibility (max 200 characters)	-
width	number	✗	Image width in pixels (10-2000)	Auto (from image)
height	number	✗	Image height in pixels (10-2000)	Auto (from image)
align	string	✗	Image alignment: left, center, right	left
spacing	object	✗	Custom spacing override (before / after in pt)	From defaults.spacing.image

Image Defaults (defaults)

For images, only the spacing defaults under defaults.spacing are applied. Other global defaults do not affect image rendering.

note

Document-level defaults for other image properties (such as width, height or align) are currently not supported. These values must be set on each individual image element if needed.

Nested Default Properties (dot notation)

Property	Type	Description
defaults.spacing.before.image	number	Spacing before image elements in pt (0-100, default: 10)
defaults.spacing.after.image	number	Spacing after image elements in pt (0-100, default: 15)

Defaults Example

{
  "document": {
    "type": "pdf",
    "filename": "image-defaults-example"
  },
  "defaults": {
    "spacing": {
      "before": {
        "image": 12
      },
      "after": {
        "image": 18
      }
    }
  },
  "sections": []
}

Image Examples

Image Example JSON

{
  "document": {
    "type": "pdf",
    "filename": "image-elements-example"
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        {
          "type": "h1",
          "text": "Image Elements Example"
        },
        {
          "type": "text",
          "text": "Left aligned image with custom spacing:"
        },
        {
          "type": "image",
          "src": "https://fastly.picsum.photos/id/831/1600/900.jpg?hmac=gIi_21iE10nYnQETpI_xB8_CP_hYqPtJol_lj_zY0k4",
          "alt": "Sample landscape image",
          "width": 200,
          "align": "left",
          "spacing": {
            "before": 10,
            "after": 20
          }
        },
        {
          "type": "text",
          "text": "Center aligned image with medium size:"
        },
        {
          "type": "image",
          "src": "https://fastly.picsum.photos/id/831/1600/900.jpg?hmac=gIi_21iE10nYnQETpI_xB8_CP_hYqPtJol_lj_zY0k4",
          "alt": "Sample landscape image (center)",
          "width": 300,
          "align": "center"
        },
        {
          "type": "text",
          "text": "Right aligned image with larger width:"
        },
        {
          "type": "image",
          "src": "https://fastly.picsum.photos/id/831/1600/900.jpg?hmac=gIi_21iE10nYnQETpI_xB8_CP_hYqPtJol_lj_zY0k4",
          "alt": "Sample landscape image (right)",
          "width": 400,
          "align": "right",
          "spacing": {
            "before": 15,
            "after": 25
          }
        }
      ]
    }
  ]
}