🧠Build a dynamic Base64 image from a sequence

Overview

This article explains how to build a Convertigo sequence that dynamically returns a Base64-encoded image via an XML/JSON response. This is particularly useful for embedding images directly into web pages or applications without relying on external file hosting.

🎯 Use Case

You want to expose an image as a Base64 string through a Convertigo sequence, enabling dynamic rendering in HTML via a <img> tag by fetching it from a sequence endpoint.

🧩 Sequence Structure

The sequence is composed of the following key components:

🔹 Sequence Name

get_B64_img — This is the name of the sequence that will return the Base64 image.

🔹 XML/JSON Output Tag

An Element Step is used and “Node name” property is set to <attachment>, which will encapsulate the image metadata and content.

🔹 Attachment attributes

Inside the <attachment> tag, use Convertigo "Attribute" steps to define the following:

Attribute Name	Value Type	Description

Attribute Name	Value Type	Description
`@type`	`"attachment"`	Identifies the tag as an attachment
`@content-type`	`"image/jpeg"`	MIME type of the image
`@name`	`"image.jpg"`	Logical name of the image
`@encoding`	`"base64"`	Specifies that the content is Base64-encoded

These attributes are added using Convertigo's Attribute component, each configured with the appropriate name and value.

🔹 Image Content

The actual Base64 content of the image is injected as the text node of the <attachment> tag. This is typically done using an Element or jElement Step.

This step should be named <attachment> so that its return value becomes the inner text of the XML node.

🌐 Example Output

Here’s what the response might look like:

🔹 XML

<attachment 
  type="attachment" 
  content-type="image/jpeg" 
  name="image.jpg" 
  encoding="base64">
  iVBORw0KGgoAAAANSUhEUgAAAZsAAACACAYAAADd/sQUAAA...
</attachment>

🔹 JSON:

{
  "attachment": {
    "text": "iVBORw0KGgoAAAANSUhEUgAAAZsAAACACAYAAADd/sQUAAA...",
    "attr": {
      "content-type": "image/jpeg",
      "encoding": "base64",
      "name": "image.jpg",
      "type": "attachment"
    }
  }
}

🔹 How to Call the Sequence for Base64 Binary Output:

To retrieve the image as a Base64-encoded binary from Convertigo, you must call the sequence using the .bin requester with the __sequence query parameter. Here's the correct format:

http://<server>/convertigo/projects/<project_name>/.bin?__sequence=<sequence_name>

For example, if your project is named cda_b64_img and your sequence is get_B64_img, the full URL would be:

http://localhost:18080/convertigo/projects/cda_b64_img/.bin?__sequence=get_B64_img

This endpoint returns the raw Base64 content of the image, suitable for direct embedding or processing in client applications.

🖼️ HTML Integration

To display the image in an HTML page, you can:

Use a Convertigo endpoint

<img src="http://localhost:18080/convertigo/projects/cda_b64_img/.bin?__sequence=get_B64_img" alt="Dynamic Image">

✅ Tips

Ensure the image encoding matches the declared MIME type (image/jpeg, image/png, etc.)
Use caching in sequence if serving frequently accessed images

🌐 Demo project

Import the following project in your Convertigo Low Code Studio to see it in action:

Download .car file: https://github.com/convertigo/c8oprj-sample-b64-img/releases/download/1.0/cda_b64_img.car

Import directly in the Convertigo Low Code Studio:

Project Remote URL: cda_b64_img=https://github.com/convertigo/c8oprj-sample-b64-img/archive/master.zip

get_B64_img sequence

Browser response preview