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