What is the best way to showcase a local image in the console using nwjs?

I am currently developing a desktop application using NW.js (node-webkit).

In relation to this topic google chrome console, print image, I am attempting to display an image in the console.

Following the suggestion from the aforementioned topic, the following command works smoothly:

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 issue arises when I try to do the exact same thing with a local file URL, like:

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

Interestingly, the console does not display anything in these cases.

I came across a similar unresolved question How to display local image to console? which seems to be addressing the same issue.

javascriptnode.jsgoogle-chrome-devtoolsnode-webkitnwjs

Answer №1

After experimenting with Base64 encoding, I found success: https://i.stack.imgur.com/0AAhA.png

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS - A pagination demonstration incorporating intelligent logic inspired by Google's approach

I struggled to implement a paging solution that I came across online. The issue seems to be related to the timing of function calls, specifically how the setPage function is triggered before all data is retrieved, causing it to not properly determine the t ...

javascriptangularjspagination

The functionality of JQuery TableSorter is not responsive when a user clicks on it

I seem to be running into an issue on my website where I can't get the JQuery TableSorter to work properly. When I attach it to a table for sorting, nothing happens when I click on the headers. The table remains static and unsortable. Here's a s ...

javascriptjquerytablesorter

Angucomplete-alt fails to display dropdown menu

On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...

javascripthtmlangularjs

What could be causing the 500 error from localhost Next.js GetStaticProps when trying to access a localhost C# ASP.NET Core API route

I currently have a C# / ASP.NET Core Web API project running on https://localhost:7001 and a Next.js app running on http://localhost:3000. The C# API runs successfully from Swagger and in the browser (https://localhost:7001/api/SourceSystems), but when tr ...

node.jsnext.jsasp.net-core-mvchttp-status-code-500

Using JavaScript to pass a newly created variable as an argument in a default

Currently, I am developing a node application that heavily utilizes promises. To enhance the readability of my code, I have been removing anonymous functions and storing them in a JavaScript object called "myCallbacks". Here's an example: let myCallb ...

javascriptnode.jses6-promiseasynccallback

Finding out whether the current date falls between a startDate and endDate within a nested object in mongoose can be done by using a specific method

My data structure includes a nested object as shown: votingPeriod: {startDate: ISOdate(), endDate: ISOdate()}. Despite using the query below, I am getting an empty object back from my MongoDB. const organizations = await this.organizationRepository.find( ...

javascripttypescriptmongodbmongoosenestjs

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

javascriptjqueryhtmlcssangularjs

Get the large data file in sections

I ran a test script that looks like this: async function testDownload() { try{ var urls = ['https://localhost:54373/analyzer/test1','https://localhost:54373/analyzer/test2'] var fullFile = new Blob(); for (le ...

javascripthtml

Rotating images on a canvas

We're currently implementing Ionic and Angular in our project. One issue we are facing is regarding image rotation on canvas. When we click on an image, the rotation works perfectly if it's a jpg file. However, when we pass a base64 image, the r ...

javascriptangulartypescriptionic-framework

Create an input field with a dynamic and exclusive identifier using the DataTables plugin

I am having trouble creating unique IDs for each input field based on the number of rows Here is the code snippet: $(document).ready(function() { var oTable = $('#jsontable').dataTable(); //Initialize the datatable $.ajax({ url ...

javascriptjqueryhtml

Make changes to the answer in an express/nodejs environment

I am currently working on creating multiple stream data in Node.js using express. Here is an example of how I create a URL: app.get('/temp/1', function(req, res){ res.send('hello, I am not modified') }) My question is: Can the resp ...

node.jsapiexpress

Is there a way to refresh my list following a POST request when utilizing a separate endpoint?

I'm struggling with updating my list after a POST request. I haven't been able to find any solutions online. Typically, I would just push an object into an array, but it seems different in this case. This function utilizes 2 API endpoints. The f ...

javascriptvue.js

Tips for incorporating additional file attachments in MVC and jQuery for uploading files

After exiting Yahoo, a new feature was introduced for attaching files. Once you click on the "Attach more files" button, it transforms into a single field where you can insert the file. The code snippet is shown below: <a href = "javascript: addUploa ...

javascriptjqueryasp.net-mvc-3asp.net-mvc-4

Trouble with Ajax program loading properly in Chrome browser

I have developed a small ajax program and encountered an issue. While it works perfectly fine on Internet Explorer 11, it does not function correctly on Chrome and Firefox. Here is the HTML file snippet: <html> <head><title>Ajax Page< ...

javascriptphpajaxgoogle-chromexmlhttprequest

The error encountered with react createRef was caused by a faulty implementation

Here is the revised question post completing the answer In this particular code snippet, I have encountered an issue where my file browser opens correctly upon submission, however, the updated state is not reflected when I click the final submit button. ...

javascriptreactjscreate-ref

JavaScript OOP Function call not functioning in IE9

When using IE9, a JavaScript OOP Function call does not seem to work for me. Here is my code snippet: var newobj = new SAObject(); <input onclick="newobj.function()" /> Upon clicking the button, nothing happens. No alert is displayed, and it seem ...

javascriptoopinternet-explorer-9

Is it feasible to run an "npm install" on code modifications made after the last version number update?

Hi there, I'm new to npm and have a question. Sorry for being a beginner. I am utilizing the node-dbus npm module, which is currently on version 0.2.0. However, I noticed that there have been some code changes added since the version was last updated ...

node.jsnpmnpm-install

Getting the value from the object that holds the Provider/Consumer using React's Context API

Below is a demonstration using the Context API object with a library called 'react-singleton-context'. Check it out here. In my Menu.js file, I have the code snippet console.log(useSharedDataContext()). This displays an object containing Consume ...

javascriptreactjsreact-context

Error in Cross-Origin Resource Sharing (CORS) encountered when trying to

Below is the code snippet provided: app.js: const passport = require('passport') , FacebookStrategy = require('passport-facebook').Strategy , ... passport.serializeUser(function(user, done) { console.log('serializing user&a ...

angularjsnode.jsfacebookcorspassport.js

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Within my Jquery function, I have implemented a feature that darkens the screen after a period of user inactivity. This triggers a pop-up window giving the user the option to stay logged in by clicking a button. If there is no response within the set time ...

javascriptasp.netjqueryiframeparent-child