CODEWITHSUNDEEP
javascripthtmlcsslocal
user3596335
user3596335

Reputation:

How to display local image to console?

I just noticed that javascript with css makes it possible to display different styles in the developer console. Of course, this also makes it possible to display images in the console.

Since I can use this feature for my project very well, I wanted to try it directly. Without success.

With the code below (which I have from this post: https://stackoverflow.com/a/26286167) I can output images with a 'URL' (i.e. online images).

But for local images this does not work with Safari so far.

Does anyone know why it doesn't work with local images, while it does with URL's? And does anyone know a workaround to still be able to display local images in the console?

Note: Please open your browser console for the snippet below: (Or find it here: https://jsfiddle.net/7wbnsp9u/3/)

(function(url) {
  var image = new Image();
  image.onload = function() {
    console.log('%c', [
      'font-size: 1px;',
      'line-height: ' + this.height + 'px;',
      'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',
      'background-size: ' + this.width + 'px ' + this.height + 'px;',
      'background: url(' + url + ');'
    ].join(' '));
  };
  image.src = url;
})('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');
> Please open your <b>developer console</b>.

This is what it looks like in safari:

im

This is working fine:('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');

... while this is not: ('mini.jpg'); = (/Users/xy/project/mini.jpg)

Upvotes: 4

Views: 7986

Answers (3)

NVRM
NVRM

Reputation: 13047

Nerds passing by might appreciate the inline text SVG version.

console.log("%c  ","font-size:250px;background:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><text y='0.95em' font-size='8'>👽</text></svg>\")")

console svg ufoconsole error big cross 250px SVG

console.log("%c  ","font-size:250px;background:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><text y='0.9em' font-size='8'>HI</text></svg>\") no-repeat");

big text console SVG

Upvotes: 1

Jaredcheeda
Jaredcheeda

Reputation: 2004

You can use Base64 encoded images.

enter image description here

var º = "%c";
var consoleNormal     = "font-family: sans-serif";
var consoleBold       = "font-family: sans-serif;" +
                        "font-weight: bold";
var consoleCode       = "background: #EEEEF6;" +
                        "border: 1px solid #B2B0C1;" +
                        "border-radius: 7px;" +
                        "padding: 2px 8px 3px;" +
                        "color: #5F5F5F;" +
                        "line-height: 22px;" +
                        "box-shadow: 0px 0px 1px 1px rgba(178,176,193,0.3)";
var consoleBackground = "background-image: url('data:image/png;base64,iVBO" +
                        "Rw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQ" +
                        "VQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAA" +
                        "BJRU5ErkJggg==')";


console.info(º+"Example: Normal", consoleNormal);
console.info(º+"Example: Bold", consoleBold);
console.info(º+"Example: Code", consoleCode);
console.info(º+"Example: Background", consoleBackground);

Upvotes: 1

StealthSpoder
StealthSpoder

Reputation: 346

Browsers do not allow local file access like this for security. You will need a webserver running on localhost for this to work as you intend.

Upvotes: 6

Related Questions