如何在Postman中可视化Base64格式的图片？

有两种简单方法可以实现：

方法一：通过Tests脚本生成预览 #

1. 打开请求的「Tests」标签页
2. 根据返回的Base64字符串情况，添加对应脚本：
   • 如果返回的字符串没有data:image/xxx;base64,前缀：

     const base64Str = pm.response.text();
     // 替换成实际图片格式，比如image/jpeg、image/gif
     const imageUri = `data:image/png;base64,${base64Str}`;
     const html = `<img src="${imageUri}" style="max-width:100%;" />`;
     pm.visualizer.set(html);
     

   • 如果返回的字符串已经包含完整前缀：

     const imageUri = pm.response.text();
     const html = `<img src="${imageUri}" style="max-width:100%;" />`;
     pm.visualizer.set(html);
     

3. 发送请求后，切换到「Visualizer」标签就能看到图片预览

方法二：直接在Visualizer标签编写代码 #

1. 发送请求后，切换到「Visualizer」标签
2. 输入以下代码（根据图片格式调整image/png）：

   <img id="previewImg" style="max-width:100%;" />
   <script>
     const base64Data = pm.response.text();
     const imageSrc = base64Data.startsWith('data:image') 
       ? base64Data 
       : `data:image/png;base64,${base64Data}`;
     document.getElementById('previewImg').src = imageSrc;
   </script>
   

3. 页面会自动渲染出对应的图片

内容的提问来源于stack exchange，提问作者Cyrine