Postman中如何正确可视化Get请求返回的Base64格式图片？

问题根源 #

你当前的代码存在两个关键问题：

• 模板变量引用错误：你传递给可视化模板的是response对象，但模板里直接用{{name}}、{{images}}，Postman无法正确解析这些变量
• Base64图片缺少数据URI前缀：响应里的images是纯Base64编码字符串，浏览器无法直接识别，必须加上data:image/[格式];base64,的前缀才能渲染为图片

修正后的Tests脚本 #

const responseData = pm.response.json();
// 处理Base64图片：添加数据URI前缀，这里假设图片是PNG格式，可根据实际改为image/jpeg等
const imageSrc = `data:image/png;base64,${responseData.images}`;

const template = `
<html>
<body>
    <h1>{{response.name}}</h1>
    <p>Base64编码内容：{{response.images}}</p>
    <img src='{{imageSrc}}' alt='recipe image' style='max-width: 100%;'>
</body>
</html>
`;

// 传递正确的变量到模板
pm.visualizer.set(template, {
    response: responseData,
    imageSrc: imageSrc
});

额外说明 #

• 如果不确定图片格式，可以尝试替换image/png为image/jpeg或image/gif，直到图片正常显示
• 如果后端返回了图片格式的元数据，建议直接使用该格式值来拼接前缀，避免猜测
• 模板里的style='max-width: 100%;'是为了让图片自适应可视化面板宽度，可选保留

内容的提问来源于stack exchange，提问作者João