I'm constantly working with base64 encoded PNGs and want to preview them.

My current workflow is to console.log(base64PNG) to the console, and then copy the image into a website like /converter/decode/image/png where I can decode + preview the image.

Is there some way (for ex. a Chrome extension) where I can just preview these inside the console?

I'm constantly working with base64 encoded PNGs and want to preview them.

My current workflow is to console.log(base64PNG) to the console, and then copy the image into a website like https://base64.guru/converter/decode/image/png where I can decode + preview the image.

Is there some way (for ex. a Chrome extension) where I can just preview these inside the console?

• javascript
• image
• google-chrome
• base64

• Does this answer your question? How to display Base64 images in HTML – evolutionxbox Commented Jun 26, 2023 at 16:22

2 Answers 2

You can just create an Image object and put the base64 as its src, including the data:image... part like this:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

It's what they call "Data URIs" and here's the patibility table for inner peace.

You can display images in the console (chrome) see https://github./adriancooney/console.image

I had a quick look through the code and created a simple example (the css padding/height/width etc are not right, but it works)

console.log("%c Image", "background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACvSURBVEhL7ZTBDYQgEEW3G/qxGm9Uwc0O7MGEJrxagEXM4uxIUAf/wRCTzbzMYSAkD/8QP+Rd02JBO0wAMQHEBJDXBQuF/FfpZW8dyHe0XnoVIBgdjZP0saMwHHvWx0U2Ve4E59tNxTL1jkKhrIEEOZ9fFb6533ZmWVVBgj33M/w1MTlqB3ZuZ1CPWGbDB/KQVMCQD68ohc6Jb+FoL0oFCR5jAogJICaA/I2gXXn3BSpPGV5H5sKpAAAAAElFTkSuQmCC'); background-size: 32px 32px; line-height: 32px; font-size: 1px; padding: 32px;").

The following function should help, I couldn't work out how to stop it repeating the image, so I just added background-repeat: no-repeat.

function logimage(h, w, uri) {
    console.log("%c+",`font-size: 1px; padding: ${Math.floor(h/2)}px ${Math.floor(w/2)}px; line-height: ${h}px;background: url('${uri}'); background-size: ${h}px ${w}px; background-repeat: no-repeat; color: transparent;`)
}

Depending on the source of your base64 strings, it should be pretty simple to create a bookmarklet to automate this.