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 pretty nice, i saw that there is many of those available online right now. The problem is that none of them are working atm.

I noticed it after last chrome update i think. currently i have version 49.0.2623.112.

All of those plugins including mine works in the same way:

console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;");

For example this one: plugin link on github

Does anyone know how we can print images in console in newer versions of chrome ?

Answer 1

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 2

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.