Lightweight console.image

console.image.js

console.image = (url, scale = 1) => {
  if (!url) return;

  const img = new Image();

  img.onload = function () {
    // way easier to see whats going on when its an array of styles
    const styles = [
      `background: url("${url}")`,
      `background-size: ${(this.width * this.scale)}px ${(this.height * this.scale)}px`,
      'color: transparent',
      'font-size: 1px',
      `padding: ${Math.floor(this.height / 2)}px ${Math.floor(this.width / 2)}px`,
      `line-height: ${this.height}px; `
    ].join('; ');
    console.log('%c+', styles);
  };

  img.src = url;
};

// Business Baboon is my spirit animal
console.image('https://media1.giphy.com/media/l41lVsYDBC0UVQJCE/200.gif#1-grid1');


// usage with es6 isnt super great, but you can use
import * as anythingYouWant from './path/to/console.image.js';
// then because its attached to the console you can still use
console.image('https://media1.giphy.com/media/l41lVsYDBC0UVQJCE/200.gif#1-grid1');
// and it'll work