How to load image from IPFS to <img> HTML tag with js-ipfs?

Help
1

How can I load image from IPFS to HTML tag with js-ipfs?

2 
// prereqs
const node = await IPFS.create()
const cid = '/ipfs/Qmay7eKcsxZ5UkraAucEGtTsv6LzA5hn3P8JnQQcWaVwcN'

// load the raw data from js-ipfs (>=0.40.0)
let bufs = []
for await (const buf of node.cat(cid)) {
  bufs.push(buf)
}
const data = Buffer.concat(bufs)

var blob = new Blob([data], {type:"image/jpg"})
var img = document.getElementById("target") // the img tag you want it in
img.src = window.URL.createObjectURL(blob)
3 Likes