如何将本地图像显示到控制台？答案

【问题标题】：How to display local image to console?如何将本地图像显示到控制台？
【发布时间】：2018-09-13 19:25:14
【问题描述】：

我刚刚注意到javascript with css 可以在开发者控制台中显示不同的样式。当然，这也使得在控制台中显示图像成为可能。

由于我的项目可以很好地使用这个功能，所以我想直接尝试一下。没有成功。

使用下面的代码（我从这篇文章中获得：https://stackoverflow.com/a/26286167），我可以输出带有“URL”的图像（即在线图像）。

但对于本地图像，到目前为止，这不适用于 Safari。

有谁知道为什么它不适用于本地图像，而它却适用于 URL？有没有人知道仍然能够在控制台中显示本地图像的解决方法？

注意：请打开您的浏览器控制台查看下面的 sn-p：（或在此处找到：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');

&gt; Please open your &lt;b&gt;developer console&lt;/b&gt;.

这就是它在 safari 中的样子：

这工作很好：('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');

...虽然这是不是：('mini.jpg'); = (/Users/xy/project/mini.jpg)

【问题讨论】：

Local file access with javascript的可能重复
仅供参考，您的示例不适用于 Chrome 或 Firefox。
当前版本是 69.0.3497.92。您如何/为什么仍在使用 54？它于 2016 年发布

标签： javascript html css local

【解决方案1】：

出于安全考虑，浏览器不允许像这样访问本地文件。您需要一个在 localhost 上运行的网络服务器才能按您的意愿工作。

【讨论】：

【解决方案2】：

您可以使用 Base64 编码的图像。

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

【讨论】：