如何在Postman Flow的输出块中显示生成的图片？

Postman Flow目前（截至2024年）确实没有原生支持在输出块直接渲染二进制图片响应，但可以通过以下两种方法实现需求：

方法一：将二进制响应转为Base64嵌入HTML显示 #

1. 在Flow的请求节点后添加一个代码块，将响应的二进制数据转换为Base64编码并构造HTML：

// 获取请求返回的二进制数据流
const imageBytes = pm.response.stream;
// 转换为Base64编码
const base64Image = btoa(String.fromCharCode(...new Uint8Array(imageBytes)));
// 生成可渲染的HTML代码
const htmlContent = `<img src="data:image/png;base64,${base64Image}" alt="生成的二维码" style="width:200px;height:200px;" />`;
// 传递结果给输出块
return htmlContent;

2. 将代码块的输出端口连接到输出块，点击输出块右上角的设置图标，将「显示模式」切换为「HTML」，即可看到渲染后的图片。

方法二：直接使用请求URL构造HTML展示 #

既然你提到图片链接能正常打开，可直接利用请求URL生成HTML：

1. 在请求节点后添加代码块，生成包含图片链接的HTML：

// 获取当前请求的完整URL
const qrCodeUrl = pm.request.url.toString();
// 构造HTML
const htmlContent = `<img src="${qrCodeUrl}" alt="生成的二维码" style="width:200px;height:200px;" />`;
return htmlContent;

2. 同样将代码块输出连接到输出块，切换显示模式为「HTML」即可渲染图片。

补充说明 #

这两种方法都是借助Flow输出块对HTML的支持来实现图片渲染，属于临时替代方案。后续可以关注Postman官方更新，Flow的后续版本可能会增加原生的二进制图片渲染支持。

内容的提问来源于stack exchange，提问作者Erwan Le Tutour