时间戳

首页 > 解决方案 > 如何将本地图像显示到控制台？

javascript - 如何将本地图像显示到控制台？

问题描述

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

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

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

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

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

注意：请打开浏览器控制台查看以下代码段：（或在此处找到：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>.

这是它在 safari 中的样子：

我是

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

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

标签： javascripthtmlcsslocal

解决方案

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

推荐阅读