I am creating an application with electron which will have 3 windows:
- A
Loader(it is in charge of verifying if there are updates or not). Configuration and Updates.The main Window where a URL is loaded.
Problem: I am trying to integrate an image into the Loader.
I understand that I should have a file loader.hmlwhere I would put the htmlso that it shows the image.
const appIcon = new Tray('/app/resource/images/icon.png')
const win = new BrowserWindow({ icon: '/app/resource/images/icon.png' })
but it is possible to load an image of a specific size without having to load the html file. as if it were an icon or application resource?
The idea would be to add this image as part of the main application or installation and display it while the loader checks for updates.
Update: Code I have:
Main.js
const electron = require('electron');
const url = require('url');
const path = require('path');
const isAdmin = require('is-admin');
const { app, BrowserWindow, Tray } = electron;
const Menu = electron.Menu;
const MenuItem = electron.MenuItem;
let loaderWindow;
function appLoader() {
loaderWindow = new BrowserWindow({ width: 400, height: 200, frame: false });
loaderWindow.loadURL(`file://${__dirname}/app/loader.html`);
}
app.on("ready", appLoader);
Html code (loader.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="display: block; margin: 0px; overflow: hidden;">
<img src="assets/img/loader.png" alt="Browser Loader" style="width: 100%; margin: 0px 0px;padding: 0px 0px; overflow: hidden;">
</body>
</html>
Another alternative exists:
new BrowserWindow({
backgroundColor: "#F7C136"
});
either:
mainWindow.setBackgroundColor('#56cc5b10')
But I don't find something for resources like an image.
