Use javascript to console.log images
Published on November 15, 2021 implementation javascriptI recently discovered this method to display images in the
browser console by using console.log
and some CSS.
It works by using the CSS support for console.log
to
set a background-image
to the message. It also sets
some padding to make the image visible and really, that’s it.
console.img = (url, width, height) => {
const styles = [
`background-image: url(${url})`,
"background-size: 100% 100%",
"color: transparent",
`padding: ${height}px ${width}px`
].join(";")
console.log("%c ", styles)
}
If you want to add this to your codebase, use this JsDoc to make your work easier.
/**
* Print an image to the console.
* @example console.img("http://e.lvme.me/ldu2529.jpg", 150, 130)
* @param {url} url - the url of the image
* @param {width} width - the width of the image
* @param {height} height - the height of the image
*/