javascript - How to display local image to console? - Stack Overflow

I just noticed that javascript with css makes it possible to display different styles in the developer

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)

Share Improve this question edited Sep 13, 2018 at 19:32 asked Sep 13, 2018 at 19:25 user3596335user3596335 3
  • 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
Add a ment  | 

3 Answers 3

Reset to default 6

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'>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1743712894a4494492.html

相关推荐

  • javascript - How to display local image to console? - Stack Overflow

    I just noticed that javascript with css makes it possible to display different styles in the developer

    8天前
    10

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信