javascripthtmlcssvue.jsvuejs3

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


Solution

  • 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>