Building an electron application with vue js to incorporate static images access

Looking for guidance on linking static images with vuejs in electron.

Upon starting the app, I encountered the following response:

The structure of my project folder is as follows:

to-do-desktop:
|
|-.electron-vue
|-build
|-dist
|-node_modules
|-src --> Contains source code and index.ejs
|-static --> Includes images and index.css
|-.babelrc
|-.env
|-.eslintignore
|-.gitignore
|-.travis.yml
|-appveyor.yml
|-package
|-package-lock
|-README.md
|-vue.config

My query revolves around pasting the entire static folder to a specific destination within the browser. In my vue-File, I am currently using this relative path:

static/weiss.png

I followed a tutorial to build the app available at:

https://auth0.com/blog/electron-tutorial-building-modern-desktop-apps-with-vue-js/

To build the app, I used the command:

npm run build

What should be the appropriate relative path and configuration settings to be adjusted?

Your help is greatly appreciated.

Answer №1

When faced with the issue, I resolved it by manually adjusting the file paths post-build to make them relative by incorporating dots(.), like so:

/static/css/randomstring.css
/static/js/randomstring.js

changed to

./static/css/randomstring.css
./static/js/randomstring.js

This simple adjustment successfully fixed the problem without requiring any configuration changes or additional library installations.

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

The v-show directive is not activated by a Vuex commit

I am experimenting with vuex for the first time, and I have come across an issue where a v-show directive is not triggering after a mutation commit on the store. // store.js import Vue from "vue" import Vuex from "vuex" const states = ...

Navigate through chosen options by clicking on a button

It's a new day and I'm facing a simple challenge that seems complicated in the morning haze. I need to create a select dropdown with zoom percentage values, along with + and - buttons to navigate through the list. If I have the following setup: ...

Tips for integrating external libraries into VueJS CLI 3

I have recently created a Vue app using the latest Vue CLI (version 3.5.1) by running the following command: vue ui Here is my current folder structure: app_vue: |- node_modules |- public |- src: |---- assets |---- components: |---------Li ...

scrollable material ui chips list with navigation arrows

I'm attempting to create a unique scrollable chips array using Material UI version 4 (not version 5). Previous examples demonstrate similar functionality: View Demo Code I would like to update the scrolling bar of this component to include l ...

Verify whether the items within the ng-repeat directive already contain the specified value

I am facing an issue with displaying a JSON string of questions and answers in ng-repeat. The problem is that I want to display each question only once, but show all the multiple answers within ng-repeat. {Answer:"White",AnswerID:967,answer_type:"RADIO",f ...

"Activate the parent window by navigating using the accesskey assigned to the href

I have integrated a bank calculator tool into a website. The calculator opens in a new window, but I am encountering an issue. Users need a shortcut to open the calculator multiple times. I have discovered the accesskey feature, which works the first tim ...

In WordPress, the magic_quotes feature is essential for json_decode to function properly

In my current project on the client side, I am dealing with an array of JavaScript objects. Upon submission, this array needs to be sent to PHP using a form and then further manipulated on the server-side. As I work on building or modifying the array of o ...

Struggling with calling rerenderEvents in FullCalendar using JQuery after a successful AJAX request

I seem to be encountering an issue where the calendar does not update after a POST request. Everything works smoothly until that point: $('#calendar').fullCalendar({ ... select: function (startDate, endDate) { $.ajax({ ...

Unable to modify div style using a JS function

I am attempting to show different divs based on the button clicked, with all starting with a display style of "none" except for one default div called "atualizacoes". After clicking a button, all divs should be set to display="none", and then the specific ...

Updating website links in real time with the power of jquery

Is there a way to dynamically change the parameter of a link? For example: Link1 Link2 Link3 By default, their URL is ?item=text, so link1 would be href="?item=link1", etc. But when I click on link1, the URLs of link2 and link3 should change to include ...

Revisiting Angular: The Curious Case of an Object Attribute Altering Attributes on Two Separate Objects

Creating a website with Angularjs involves working with an array of objects: $scope.fieldsToShow = [ { "fields": {}, "type": "LOGGED_IN" }, { "fields": {}, "type": "PERSONAL", "user": 2, "name": ...

Personalizing the pop-up window using window.open

When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...

This function is designed to only work under specific conditions

Looking for assistance with a function that takes an item ID as input and changes its border when pressed. The goal is to increase the border width by 2px when there is no border, and remove the border completely when pressed again. Currently, only the f ...

Discover the steps to download web page data using Objective-C while ensuring that JavaScript has finished executing

I attempted something similar: NSString *url = @"http://www.example.com"; NSURL *urlRequest = [NSURL URLWithString:url]; NSError *error = nil; NSString *htmlContent = [NSString stringWithContentsOfURL:urlrequest encoding:NSUTF8StringEncoding error:&e ...

Navigating an Array in Typescript

Angular is linked to node.js, which interacts with mongodb to fetch data successfully. However, I am now faced with the challenge of mapping variables in my typescript component to the backend node.js. When viewing the data structure in the browser consol ...

The Vue 3 component package you're trying to use is lacking a necessary template or render

I recently shared my Vue 3 component on NPM for others to use. However, I'm encountering a warning when trying to use it in different projects: [Vue warn]: Component is missing template or render function. at <VueToggle id="1" title=&quo ...

How can I retrieve items from an object that are contained within a nested array with a specific value

I am working with a nested array of objects, and I am trying to extract matching items based on a specific value stored in the nested object within these objects, which also contain nested arrays. Example: Sample data: const items = [ { name: & ...

Prevent User Access to Start Button During Browser Request Processing

I have buttons for starting and stopping a window service on a server. When I click on the start button, the service takes some time to start. During this time, I need to disable the start button on the client side. The same goes for the stop button. Even ...

Determining special characters within a string using VueJS

As a newcomer to VueJS, I am currently developing an application that requires a signup and login system. My goal is to inform the user if they have entered a special character such as /[&^$*_+~.()\'\"!\-:@]/. In order to achieve th ...

Managing Image Quality with Unsplash API

How can we ensure high quality images are embedded on the web using Unsplash API or other methods? The image displayed in the example below appears blurry and unclear compared to the original image. Original Image link: Example of embedding the image abo ...