Develop Reference

How to access an image in Vue src folder using JS

I have a Vue app where I want to access some image files in an included JS file for various purposes, e.g. one of which is adding images to a canvas element.
This would normally be easy using something like the following:
function getImage() {
let img = new Image();
img.src = '/assets/images/bg.jpg';
img.onload = function () {
//
};
}
I can technically access images in my public folder this way, but what if I want to access compiled image assets from my src folder rather than public folder?
In CSS I can simply use an # symbol in the path like #/assets/images/bg.jpg (as this is configured as an alias in the vue config) so I tried...
img.src = '#/assets/images/bg.jpg';
...but this doesn't work.
Is there a way to achieve this, or is what I'm trying not possible? Perhaps assets referenced purely in JS aren't included in the build process? Thanks

Tried this out, and it does in fact work.
<img src="#/assets/my-image.png" />
However since this is compiled, you won't be able to set / change the image src dynamically with JS like you're doing in your example above.

With webpack you can do this:
img.src = require('#/assets/images/bg.jpg');
During the build it will be replaced with a path to the compiled asset.

How can I change the href of a Javascript created page after bundling with webpack?

I'm trying to use webpack with a project and I'm having trouble with dynamically created pages.
I have three dynamically created modules for a header, a footer ,and one other page.
Per example in header.js, I have a navbar with link such as "/src/html/about.html".
When I run the live server from the src folder I encounter no problem at all. The problem comes when I run webpack and I bundle everything into the dist folder. The paths inside the .js files to not change and my index.html can not load them up properly.
header.js looks like this but is lengthier, navbarLogo.href is the example:
const displayHeader = () => {
const navbar = document.createElement('div');
navbar.classList.add('navbar');
centeredContainer.appendChild(navbar);
const navbarLogo = document.createElement('a');
navbarLogo.classList.add('navbar-logo');
navbarLogo.href = "/src/index.html";
navbar.appendChild(navbarLogo);
}
export default displayHeader;
Do you know how to handles these types of path problems?

Getting path to file in published webcomponent

I have a webcomponent where I need to add a link tag to the head and set the href equal to a folder inside that node module.
Right now I'm in the building phase of this component where my structure look like this:
So I need to add the fontawsome.css script to the head of my page. I've created the following script:
constructor() {
super();
if (!this.isFontAwesomeLoaded()) {
this.iclass = '';
const fontEl = document.createElement('link');
fontEl.rel = 'stylesheet';
fontEl.href = "./fontawesome/css/all.css";
document.head.appendChild(fontEl);
}
}
Now there is a problem with this the path ./fontawesome/css/all.css won't work when it hits the head tag because the index.html file that attempts to load it doesn't have the folder in its project. instead when it hits product it needs to find the absolute path to my module and then to the fontawesome folder.
My question is how can I get that path?

There is a lot of things that should be avoided:
External dependencies from within web-component is a bad idea, especially something big like fontawesome. You said that you try to avoid coupling, but actually you introduce it with such dependency.
Web-components rarely should be used without shadow-dom (IMHO), by accepting fontawesome you basically ignore that functionality of web-components.
There are a couple of ways you could handle such scenario:
extract what you need from fontawesome's all.css into your web-component.
state in your component's docs that it depends on fontawesome and that the client should provide it on their side
use CDN (really bad decision, avoid this):
constructor() {
super();
if (!this.isFontAwesomeLoaded()) {
this.iclass = '';
const fontEl = document.createElement('link');
fontEl.rel = 'stylesheet';
fontEl.href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
document.head.appendChild(fontEl);
}
}

Importing local HTML page with fetch into another HTML page

Basically, I have a html file called panel containing a simple DIV that I would like to insert into another main HTML file.
Instead of using web components, I'd like to implement a simple solution as described in this answer.
So, here is what I am doing for testing (just logging the panel to console):
panel.html
<div id="panel">
<h1>It works...</h1>
</div>
get-template.ts
export async function getTemplate(filepath: string, selectors: string) {
let response = await fetch(filepath);
let txt = await response.text();
let html = new DOMParser().parseFromString(txt, 'text/html');
return html.querySelector(selectors);
}
main.ts
import { getTemplate } from './get-template'
getTemplate('/path/to/panel.html','#panel').then((panel) => {console.log(panel);})
The console logs "null".
If this info could make any difference, I am using parcel-bundler to build the application.

The actual problem was determined by #CBroe and was about the fact that when parcel builds my application, the file path of my panel.html resource changes to be relative to the built dist folder.
Just to clarify:
before building the path is relative to the main.ts file
after building the path is relative to the dist folder
So the solution is to think about the final URL the panel.html will have, and refer to it in advance before building with parcel.
Something like this would work in my case:
main.ts (new)
import { getTemplate } from './get-template'
getTemplate('./panel.html','#panel').then((panel) => {console.log(panel);})
Then of course, the other step will be to copy the actual panel.hml file into the dist directory, otherwise the URL will point to a non existing file.
I see there was a github issue about automatically copy static (or assets) files in the parcel repository, and one of the solution provided is to use the plugin parcel-plugin-static-files-copy.

Loading A HTML From Another Directory In Electron

I am trying to make an electron app and I need to load a HTML to a BrowserWindow but the script that controls this is in another Directory which isn't the same as the HTML's ones.
This is how it looks:
This is my code to load the HTML into the BrowserWindow:
const electron = require("electron");
const {BrowserWindow} = electron;
//This part is called from an exported function
const window = new BrowserWindow();
window.setSize(500 , 500);
window.show();
window.setMenu(null);
window.loadFile("../HTML/MainWindow.html");
The window is created but it doesn't load the HTML into it which is really weird, someone help? By the way keep in mind that I don't create the window from the main script.

Try with this
var path = require('path');
window.loadURL(path.join(__dirname, '../HTML/MainWindow.html'))

So I managed to solve the problem by importing path like what #Luis Daniel Sandi talled me to do and then I just did: window.loadURL(path.join(__dirname, '../HTML/MainWindow.html')) and instead of importing BrowserWindow from electron I imported that from electron.remote.