我刚刚注意到javascript with css
使之成为可能在开发者控制台中显示不同的样式。当然,这也使得在控制台中显示图像成为可能。
由于我可以很好地在我的项目中使用这个功能,所以我想直接尝试一下。没有成功。
使用下面的代码(我从这篇文章中得到的:https://stackoverflow.com/a/26286167 https://stackoverflow.com/a/26286167)我可以输出带有“URL”的图像(即在线图像)。
但对于本地图像,到目前为止,这不适用于 Safari。
有谁知道为什么它不适用于本地图像,而适用于 URL?有谁知道仍然能够在控制台中显示本地图像的解决方法?
Note: 请打开你的浏览器控制台对于下面的代码片段:(或者在这里找到它:https://jsfiddle.net/7wbnsp9u/3/ 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 中的样子:
这是工作fine:('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');
...虽然这是not: ('mini.jpg');
= (/Users/xy/project/mini.jpg)
为了安全起见,浏览器不允许这样的本地文件访问。您需要一个在本地主机上运行的网络服务器才能按您的预期工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)