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()
});

这会导致可视化面板中显示以下错误：

第 1 行解析错误：

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

我在这里做错了什么，如果是你，你会如何调试它？谢谢。

Answer 1

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

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

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

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

把手处理循环/访问数组对象的方式是不同的，所以[0]在这里不起作用。

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

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