google chrome console, print image

Question

About year ago i created a plugin to enhance console logs, main idea was to print images in console, so for example You could add some icons or glyphs.

It was working pr

Answer 1

I've been searching for a while for one that can print out the whole image without cutting it, and make it resizeable, and I came up with basically this:

console.image = function(url, size = 100) {
  var image = new Image();
  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);
  };
  image.src = url;
};

and then just use console.image(URL[, size]); to print out the image. The URL needs to be a valid URL and the size is basically percentage, with 100 being the default value. It can get shrunk down if the value is lower than 100, and expanded if the value is higher than 100.

Answer 2

Try a code example with console F12:

console.log('%c ', 'font-size:400px; background:url(https://pics.me.me/codeit-google-until-youfinda-stackoverflow-answerwith-code-to-copy-paste-34126823.png) no-repeat;');`

Answer 3

I ran into your console.image GitHub repository as a matter of fact while looking into the same issue. Although the post is quite old, I learned from the horse's mouth that it works in Chrome Canary. In fact, I tried your plugin demo in Canary and was able to see the spinning chicken. I still haven't found out why it suddenly stopped working in Chrome. The feature still works in Firebug for Firefox. The console.log() documentation for Chrome on this only showcases text-based styling.

I found one SO example where they load the image first and then apply the styling using console.log("%c....", "...");. Unfortunately, that still didn't work in "standard" Chrome.

So, short answer, it looks like Canary for now supports images in the console.