JS : Display image in browser console

README.md

Function to display image in js console

Source : https://stackoverflow.com/a/47177899

console.image = function(url, size = 100) {
  const image = new Image();
  image.src = url;
  image.onload = function() {
    var style = [
      'font-size: 1px;',
      'padding: ' + this.height/100*size + 'px ' + this.width/100*size + 'px;',
      'background: url('+ url +') no-repeat;',
      'background-size: contain;'
     ].join(' ');
     console.log('%c ', style);
  };
};

Use function

UPDATE 15.08.2024 -> Use base64 image as url

const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

console.image(url, 50);

It's not working anymore using a URL (at least in Chrome). Use a base64 "data:" image instead and it'll work 😉

Thanks, man. This is working!