Use javascript to console.log images

implementation javascript

I 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
 */