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: ) 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: /)

(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;
})('//w/z/wzz5072/mini.jpg');

> Please open your <b>developer console</b>.

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./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/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)

• javascript
• html
• css
• local

• 1 Possible duplicate of Local file access with javascript – Serg Chernata Commented Sep 13, 2018 at 19:30
• 2 FYI your example does not work in Chrome or Firefox. – Turnip Commented Sep 13, 2018 at 19:31
• Current version is 69.0.3497.92. How/why are you still using 54? It was released in 2016 – Turnip Commented Sep 13, 2018 at 19:37

3 Answers 3

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.

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/2000/svg' viewBox='0 0 10 10'><text y='0.95em' font-size='8'>