When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display:
<div background="benjamin-child-17946.jpg" class="login" style="height:100%;">
A 404 error is popping up:
Failed to load resource: the server responded with a status of 404 (Not Found)
Even though my terminal shows the image is indeed in the same directory as login.vue. I'm using webpack for compilation. What could be causing this issue?
One major issue you are facing is that single file components get compiled and the resulting script may not be in the same location as your image. Additionally, there seems to be a problem with how you are assigning the background image to your div. Utilizing CSS would be more appropriate for this task.
A potential solution could involve creating an images directory at the root of your electron application (or any desired name like assets or static). This way, you can reference files within that directory using the file:// protocol.
Furthermore, it is recommended to define a CSS class and apply it to your element. Within your single file component, include a style section like:
<style>
.background {
background: url('file:///images/benjamin-child-17946.jpg') no-repeat center center fixed;
background-size: cover
}
</style>
Then, simply add the defined class to your div element.
<div class="login background">
If needed, you could explore using webpack's url-loader to load the file as a dataUrl, but starting with the simpler approach is recommended.
Edit
In a test project created with electron-vue (which utilizes webpack), I encountered an error when using the file:// protocol mentioned above. To avoid this issue, place the image in the static directory and change the path to /static/benjamin-child-17946.jpg. This adjustment enables vue-loader to function correctly.
Note that if you are not using electron-vue, your webpack configuration may vary.
It's important to mention that the background attribute is no longer considered valid in HTML.
If you're working with compiled VUE code and noticing discrepancies in folder structure, it may be due to how the CLI organizes files.
To correctly display images, make sure to reference their full URLs in the static resource location.
I haven't personally worked with static resources using the Vue CLI, so I'm unsure of the specific requirements for this scenario.
Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...
Let's Think About It <div id="foo"> Lorem ipsum </div> <div id="bar"> sit amet </div> Is there a way to maintain the size of foo as it is while allowing bar to fill the remaining space on the page when the window size cha ...
I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...
Hey there, I'm a TypeScript newbie and looking to incorporate FontAwesome icons into my Vue 3 App. Here's the setup: Here is my main.ts : import Vue, { createApp } from 'vue'; import './registerServiceWorker'; import { librar ...
Is there a way to directly upload images from my Nuxt (vue) app to Cloudinary without involving a server? I've been searching for information on how to accomplish this but haven't found any concrete solutions. <v-file-input v-else ...
Initially, I created a vuejs project as a test container using vue-cli. Next, I developed an npm package named "vue-npm-example" from a Vuejs component in my local environment and then imported it into the aforementioned testing project. Within the packag ...
const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...
I have the ability to add and remove entries, but I'm struggling with editing. How can I achieve this using VUEJS, VUEX, and JavaScript? For adding entries, I know I should use PUSH, and for removing entries, SPLICE works fine. But what about editing ...
I am trying to create a page border by wrapping it around the content using a <div> element. The parent element is the actual page itself. However, I'm having trouble with the margin-bottom property as it doesn't seem to be working properly ...
I am working on a table in HTML that uses ng-repeat to display data. Here is the code snippet for this table: <tbody> <tr dir-paginate="x in serverData | filter:filterData | filter:filterData | itemsPerPage: itemPerPageValue | order ...
Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...
I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...
In my component, I have two vue-tabs with two instances of vue-chart-js each. While they initialize without errors, attempting to extract an image from a chart in the inactive tab using document.querySelector('#mySecondChart').toDataURL() results ...
Currently, I am designing a press page for a website where the headlines/articles are displayed in rectangles. To achieve this layout, I am using the following CSS: .press-blocks{ column-count: 4; column-gap: 2em; padding-left: 10%; padding ...
I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...
Presented here is the code snippet for the navbar located in app/assets/views/elements: <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> ...
I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...
I am trying to extract all HTML <p>...</p> elements from a document. I have been attempting to use regular expressions (Regex) with the following pattern: Regex regex = new Regex(@"\<p\>([^\>]*)\</p\>" ...
I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. ...
I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...