How to Decode (Visualize) Base64 Encoded Images in Postman？

To decode Base64 images in Postman, you need to write a script in the "Tests" section of the interface. This script fetches the image data, declares it as Base64 encoded, and renders it using an HTML template. The pm.visualizer.set() method is used to pass the template and parsing object.

Home > Blog > How to Decode (Visualize) Base64 Encoded Images in Postman？

In network communication, images are often transmitted in Base64 encoded form. This encoding method converts binary data into ASCII strings, facilitating transmission within text protocols. When using Postman, it may be necessary to receive CAPTCHA codes or other Base64 encoded image files, making the task of decoding these images (more precisely, visual rendering) essential. This article will introduce how to decode Base64 encoded images.

Understanding Base64 Encoded Images

Base64 encoding is a method that encodes binary data into ASCII strings, thus avoiding issues caused by special characters during network transmission. Base64 encoded images are commonly found in network API requests and responses. The advantage lies in simplifying the data transmission process and improving the efficiency of network communication.

Decoding Base64 Encoded Images in Postman

Suppose an API returns JSON data structured as follows, where the img field contains a Base64 encoded image CAPTCHA:

{
  "code": 0,
  "message": "ok",
  "data": {
    "img": "iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABrklEQVR4nO3dwW3CQBRAQYhSAY1CKdAoNeSAZBE7QSThAWFnTmaFjaV9+vaN9f64X8GtvT36BnhNwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLvj76BZ7Hd7Kbjw3H/5crlc6fvTCdeWHl5Q0ys7WZ32trTwXkxk8NxP9v15cqFK5+vrD6nuVwZwYgTa7bHP5ois7OumW3jTKlzQ0ysk/Pt/90Uuf6s5cNxtvLyBgpruanRg2nZ0PRU9SgcQjE/pqqWBzf/rWe2HuE/oWd7PDtefvzO7AqrKybQX97n/rUhwuL+BnrH4p6ERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRF4gNUBXa6R3p1qwAAAABJRU5ErkJggg=="
  }
}

To render this Base64 encoded CAPTCHA image in Postman, follow these steps:

Step 1: Write a Script in the Tests Section

To visualize this image CAPTCHA, you need to write a script in the "Tests" section of the interface. Refer to the following script:

// Retrieve image data
let svgContent = pm.response.json().data.img;

// Declare the image as Base64 encoded
let imgBase64 = `data:image/png;base64,${svgContent}`;

// HTML template
let template = `
    <img src="{{imgBase64}}" />
`;

// Set visualizer data by passing the template and parsing object
pm.visualizer.set(template, { imgBase64 });

In this script, pm.response.json().data.img is used to fetch the Base64 image returned by the API, with the retrieval method dependent on your API's response structure. pm.response.json() retrieves the entire response, and since the img field is under data, it is accessed accordingly.pm.visualizer.set() is a method in Postman to declare visual rendering, requiring the template to be passed into it.This script should be placed in the "Tests" section.

Decode (Visualize) Base64 Encoded Images in Postman

Step 2: Send the Request and Preview

After completing the script, click "Send" to resend the request. The script will automatically decode the image, and you can view the rendered Base64 image in the Visualize tab of the response console.

Decode (Visualize) Base64 Encoded Images in Postman

Summary

To decode Base64 images in Postman, you need to write a script in the "Tests" section of the interface. This script fetches the image data, declares it as Base64 encoded, and renders it using an HTML template. The pm.visualizer.set() method is used to pass the template and parsing object. After sending the request, the rendered Base64 image can be viewed in the Visualize tab of the response console.

How to Decode (Visualize) Base64 Encoded Images in Postman？
To decode Base64 images in Postman, you need to write a script in the “Tests” section of the interface. This script fetches the image data, declares it as Base64 encoded, and renders it using an HTML template. The pm.visualizer.set() method is used to pass the template and parsing object.
ZGYAutumn

Learn more:

Postman