如何显示本地图像以进行控制台? [英] How to display local image to console?

问题描述

我刚刚注意到带有CSS的javascript 使得在开发人员控制台中显示不同的样式成为可能.当然，这也使得在控制台中显示图像成为可能.

由于我可以很好地在项目中使用此功能，因此我想直接尝试一下.没有成功.

使用下面的代码(我在这篇文章中获得:

这可以正常运行 fine :('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg')；

...而不是:('mini.jpg'); = (/Users/xy/project/mini.jpg)

解决方案

为了安全起见，浏览器不允许这样的本地文件访问.您将需要在localhost上运行的网络服务器，以使其按预期工作.

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:

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)

解决方案

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.

这篇关于如何显示本地图像以进行控制台?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！