Postman 可视化 - 如何在简单的 HTML img 标签中渲染图像 URL

Question

在 Postman 桌面中，我正在尝试渲染 Bing 图片搜索返回的图片。（查询本身有效。）

我从 Bing API 查询得到以下响应，在桌面 Postman 中格式为 JSON：

{
    "_type": "Images",
    "instrumentation": {
        "_type": "ResponseInstrumentation"
    },
    "readLink": "https://arama.cognitiveservices.azure.com/api/v7/images/search?q=jfk",
    "webSearchUrl": "https://www.bing.com/images/search?q=jfk&FORM=OIIARP",
    "queryContext": {
        "originalQuery": "jfk",
        "alterationDisplayQuery": "jfk",
        "alterationOverrideQuery": "+jfk",
        "alterationMethod": "AM_JustChangeIt",
        "alterationType": "CombinedAlterations"
    },
    "totalEstimatedMatches": 910,
    "nextOffset": 1,
    "currentOffset": 0,
    "value": [
        {
            "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=jfk&id=23716A341D61409DE7D5D19724937DD5340BBB06&simid=608036166471451494",
            "name": "Reactions to the assassination of John F. Kennedy - Wikipedia",
            "thumbnailUrl": "https://tse1.mm.bing.net/th?id=OIP.9dNMVRmk1a3edFYrwzcFeQHaIi&pid=Api",
            "isFamilyFriendly": true,
            "contentUrl": "https://upload.wikimedia.org/wikipedia/commons/7/70/Jfk2.jpg",
        }
    ]
}

在测试选项卡中，我有以下脚本：

var template = `<img src="{{res.value[0].contentUrl}}">`;
pm.visualizer.set(template, {
    res: pm.response.json()
});

它导致 Visualizer 面板中显示以下错误：

Parse error in line 1:

我已经使用 w3schools TryIt 在线 fiddle 单独测试了参考文献 res.value[0].contentUrl，我知道它可以正常工作并正确生成有问题的 URL。

我这里哪里做错了，如果是你，你会如何调试呢？谢谢。

Answer 1

像这样的东西应该为你显示图像：

let template = `
<img src="{{res.value.0.contentUrl}}">
`

pm.visualizer.set(template, { 
    res: pm.response.json()
})

我在这里模拟了响应，但它会以同样的方式工作。

把手处理 looping/accessing 数组对象的方式不同，因此 [0] 在这里不起作用。

您也可以使用它来做同样的事情：

let template = `
{{#each res.value}}
<img src="{{contentUrl}}">
{{/each}}
`

Postman 可视化 - 如何在简单的 HTML img 标签中渲染图像 URL

Postman visualization - How to render image URL in simple HTML img tag

handlebars.js

postman