How to display local image to console?

Question

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' (ie 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:

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)

Answer 1

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.

Answer 2

You can use Base64 encoded images.

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