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 ?

Solution 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;');

Solution 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.

Solution 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.

Comments

[Aureliano Far Suau]

It may be useful add backdround-size: contain; so the image is fully shown.

[tejasvi88]

@AurelianoFarSuau g -> d typo

[AlexM]

It doesn't seem to work anymore in Chrome 101