I have a problem loading background-image in vue js's style tag

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&nbsp;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>