A version that works in modern browsers (and typescript version)

[elliots]

javascript:

/**
 * Display an image in the console.
 */
console.image = function (url, backgroundColour, scale) {
  const img = new Image()
  img.crossOrigin = "anonymous"
  img.onload = () => {
    const c = document.createElement('canvas')
    const ctx = c.getContext('2d')
    if (ctx) {
      c.width = img.width
      c.height = img.height
      ctx.fillStyle = backgroundColour;
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.drawImage(img, 0, 0)
      const dataUri = c.toDataURL('image/png')

      console.log(`%c sup?` ,
        `
          font-size: 1px;
          padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
          background-image: url(${dataUri});
          background-repeat: no-repeat;
          background-size: ${img.width * scale}px ${img.height * scale}px;
          color: transparent;
        `
      )
    }
  }
  img.src = url
}

Typescript:

declare global {
  interface Console {
    image: (url: string, backgroundColour?: string, scale?: number) => void
  }
}

/**
 * Display an image in the console.
 */
console.image = function (url: string, backgroundColour: string = 'white', scale: number = 1) {
  const img = new Image()
  img.crossOrigin = "anonymous"
  img.onload = (): void => {
    const c = document.createElement('canvas')
    const ctx = c.getContext('2d')
    if (ctx) {
      c.width = img.width
      c.height = img.height
      ctx.fillStyle = backgroundColour;
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.drawImage(img, 0, 0)
      const dataUri = c.toDataURL('image/png')
      console.log(`%c sup?` ,
        `
          font-size: 1px;
          padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
          background-image: url(${dataUri});
          background-repeat: no-repeat;
          background-size: ${img.width * scale}px ${img.height * scale}px;
          color: transparent;
        `
      )
    }
  }
  img.src = url
}

[wnunezc]

I tried to use your script to improve my own script, when I try to add icons (png image) to the console.log output I get the image repeated on every line if the content has line breaks, lol.

[moritzpf]

Here is a refined version that even works with GIFs!

/**
             * Display an image in the console.
             */
            console.image = function (url, backgroundColour, scale) {
                // Convert the URL to a base64 string to preserve animation
                fetch(url)
                    .then(response => response.blob())
                    .then(blob => {
                        const reader = new FileReader();
                        reader.onloadend = function() {
                            const base64data = reader.result;
                            
                            // Now load the image to get dimensions
                            const img = new Image();
                            img.onload = () => {
                                console.log(
                                    `%c sup?`,
                                    `
                                    font-size: 1px;
                                    padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
                                    background-image: url(${base64data});
                                    background-repeat: no-repeat;
                                    background-size: ${img.width * scale}px ${img.height * scale}px;
                                    color: transparent;
                                    `
                                );
                            };
                            img.src = base64data;
                        };
                        reader.readAsDataURL(blob);
                    })
                    .catch(error => {
                        console.error("Error loading image:", error);
                    });
            };