I tried everything in my vue app but even though I got the .html file to work with this, I can't get my app.vue file to load the background image. I have tried everything on the internet and it didn't work out. Let's get right to the problem.
background-image: url("/@/components/images/Cover1.jpg");
this code doesn't do anything
I even added the background color and it works. everything except the image shows up. so I think it is because of the path. I tried everything from ~@/components/images/Cover1.jpg to /components/images/Cover1.jpg it doesn't even though when I use /components/images/Cover1.jpg and /@/components/images/Cover1.jpg vue js doesn't give me an error.
so here is the structure of the folders and files. the image i need is in the images folder
(2 errors are because of vetur bug and aren't linked with tag) I am styling the website from app.vue 's tag
I also tried it in just a normal html and css file
folder:
.images
.index.html
.styles.css
on this file structure and normal html css file
background-image: url("images/Cover1.jpg");
works but app.vue one is problematic. Please tell me what to do
This is truly embarrassing but the problem was the case...
image folder was with uppercase "I" but I wrote
"~@/components/images/Cover1.jpg"
instead of
"~@/components/Images/Cover1.jpg"
so it didn't load the image even though strangely enough it didn't give any errors
This was a silly thing to panic about... at least I contributed to the community -.-
<h2>Login</h2>
<form id="loginForm">
<input
id="usernameInput"
type="text"
placeholder="Enter username"
autocomplete="off"
required
/>
<button>Log in</button>
</form>
<p id="message"></p>
<script>
const USERNAMES = ["alice", "bob", "charlie", "giorgi"];
const form = document.getElementById("loginForm");
const input = document.getElementById("usernameInput");
const message = document.getElementById("message");
const savedUser = localStorage.getItem("username");
if (savedUser) greet(savedUser);
form.addEventListener("submit", (e) => {
e.preventDefault();
const name = input.value.trim();
if (name.length < 4) {
showError("Username must be at least 4 characters.");
return;
}
if (!USERNAMES.includes(name)) {
showError("Username not found.");
return;
}
localStorage.setItem("username", name);
greet(name);
});
function greet(name) {
form.style.display = "none";
message.classList.remove("error");
message.textContent = `You are logged in, ${name}!`;
}
function showError(text) {
message.classList.add("error");
message.textContent = text;
}
</script>
<h2>Available Users</h2>
<div id="userList"></div>
<p id="savedMsg" class="hidden"></p>
<script>
const USERS = [
{ username: "alice", email: "alice@example.com" },
{ username: "bob", email: "bob@example.com" },
{ username: "charlie", email: "charlie@example.com" },
{ username: "diana", email: "diana@example.com" },
{ username: "eve", email: "eve@example.com" },
{ username: "giorgi", email: "giorgi@example.com" },
{ username: "mallory", email: "mallory@example.com" }
];
const listEl = document.getElementById("userList");
const savedMsg = document.getElementById("savedMsg");
const STORAGE_KEY = "savedUser";
USERS.forEach(({ username }) => {
const row = document.createElement("div");
row.className = "row";
const span = document.createElement("span");
span.textContent = username;
const btn = document.createElement("button");
btn.textContent = "Save";
btn.addEventListener("click", () => saveUser(username));
row.append(span, btn);
listEl.appendChild(row);
});
const initial = localStorage.getItem(STORAGE_KEY);
if (initial) showSaved(initial);
function saveUser(name) {
localStorage.setItem(STORAGE_KEY, name);
showSaved(name);
}
function showSaved(name) {
savedMsg.textContent = `${name} has been saved`;
savedMsg.classList.remove("hidden");
}
</script>