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

Question

In Postman desktop, I am trying to render an image returned by a Bing image search. (The query itself works.)

I have the following response from the Bing API query, formatted as JSON in desktop Postman:

{
    "_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",
        }
    ]
}

In the Tests tab, I have the following script:

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

It results in the following error showing in the Visualizer panel:

Parse error in line 1:

I have separately tested the reference res.value[0].contentUrl using w3schools TryIt online fiddle, and I know it works and correctly produces the URL in question.

What am I doing wrong here, and if it were you, how would you go about debugging it? Thank you.

Danny Dainton · Accepted Answer · 2020-08-05T12:07:46.760

5

Something like this should display the image for you:

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

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

I've mocked out the response here but it will work in the same way.

The way handlebars handle looping/accessing array objects is different so [0] wouldn't work here.

You could also use this to do the same thing:

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

edited Aug 05 '20 at 12:07

answered Aug 05 '20 at 11:23

Danny Dainton

23,069
6
67
80

Thank you so much. But what's with the `value.0` syntax? It's new to me. Why doesn't `value[0]` work? – Sabuncu Aug 05 '20 at 13:44
1

That's a question for the makers of handlebars... – Danny Dainton Aug 05 '20 at 13:44
1

OK, so it's a Handlebars idiosyncracy, I see. Can't thank you enough. Regards. – Sabuncu Aug 05 '20 at 13:46
I think I had the same issues ages ago and searched around to find this answer :D https://stackoverflow.com/a/8044689/6028443 – Danny Dainton Aug 05 '20 at 14:22
Yes, I independently found that answer as well, when I added 'handlebars' to the search. Also, I just read in this book: Building Isomorphic JavaScript Apps (Strimpel) [2016] that Walmart moved away from using Handlebars for its site. https://books.google.com.tr/books?id=0nMNDQAAQBAJ&pg=PA121&dq=handlebars+walmart&hl=en&sa=X&ved=2ahUKEwie-IChpoTrAhXpsIsKHWLxCCMQ6AEwAnoECAYQAg#v=onepage&q=handlebars%20walmart&f=false – Sabuncu Aug 05 '20 at 14:43

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

1 Answers1

Linked