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

【问题标题】：How to display local image to console? (nwjs)如何将本地图像显示到控制台？ (nwjs)
【发布时间】：2021-07-11 10:51:09
【问题描述】：

我正在使用 NW.js(node-webkit) 制作桌面应用程序

基于此主题google chrome console, print image，打印图像我正在尝试将图像显示到控制台。

正如上面主题所建议的，下面的命令效果很好：

console.log('%c ', 'font-size:400px; background:url(https://pics.me.me/codeit-google-until-youfinda-stackoverflow-answerwith-code-to-copy-paste-34126823.png) no-repeat;');

问题是，当我尝试与本地文件 url 完全相同的事情时，例如

console.log('%c ', 'font-size:400px; background:url(./res/hoge.png) no-repeat;');

console.log('%c ', 'font-size:400px; background:url(file:///C:/Users/hoge/Pictures/hoge.png) no-repeat;');

控制台不显示任何内容。

我发现了类似的问题How to display local image to console?似乎还没有解决。

【问题讨论】：

标签： javascript node.js google-chrome-devtools node-webkit nwjs

【解决方案1】：

我使用 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);

【讨论】：