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

const url = 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?auto=format&fit=crop&w=300&q=80'

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!