How to display external image(link to image given by api) in dataviewjs Table?

I’m trying to write a script that’ll fetch the daily xkcd comics in my dailynote. However I cannot display the image since i can’t use the map function (which only works with arrays). Earlier I wrote a similar script that fetched article headlines, links and images into a dataview table. What could be a workaround for this?
PS: I’m not a programmer, hence the struggle.

What I’m trying to do

Fetch the image through the api and display it in the Note.

Things I have tried

My current code (only able to fetch the image link)

const headers = { "Authorization": "Bearer whatever" }
let data = await requestUrl({url: "https://xkcd.com/info.0.json", headers})
let image = data.json.img
dv.paragraph(image)

//dv.table(["Image"], `<img src="${image}">`)

My code for fetching articles, headlines and images:

const headers = { "Authorization": "Bearer whatever" }
let data = await requestUrl({url: "https://newsapi.org/v2/top-headlines?country=XX&apiKey=XXXX", headers})
dv.table(["Title", "Source", "URL", "Image"], data.json.articles.map(data => {
return[
data.content,
data.source.name,
data.url,
`<img src="${data.urlToImage}">`
]
}));

You can use the markdown code for this:

"![](" + data.urlToImage + ")"
or 
`![](${data.urlToImage})`
1 Like

Thanks! I finally got it working using the below code:

```dataviewjs
const headers = { "Authorization": "Bearer whatever" }
let data = await requestUrl({url: "https://xkcd.com/info.0.json", headers})
let image = data.json.img
dv.paragraph(`![](${image})`)

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.