javascriptnode.jsgoogle-chrome-devtoolsnode-webkitnwjs

How to display local image to console? (nwjs)

I'm making desktop application with NW.js(node-webkit)

Based on this topic google chrome console, print image, print image I am trying to display image to console.

As suggested on the topic above, command below works nicely:

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

The problem is, when I try exact same thing with local file url, such as

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

console displays nothing.

I found similar question How to display local image to console? seems it has not been solved yet.

Solution

  • I tested with Base64 encoding and it worked for me: enter image description here

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