Thiết kế website giá rẻ

Question

I’ve been working on a Blackjack game and I’ve encountered an issue with loading images dynamically using JavaScript. Here’s the structure of my project:

/version1
   /scripts
      script.js
   /static
      /images
         2.png
         3.png
         ...
         Q.png
     /sounds
        hitSound.mp3
   /styles
      styles.css
      table.css
    index.html

My index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlackJack v2.0</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link
      rel="shortcut icon"
      href="../../icons/blackjack.png"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="./styles/table.css" />
    <link rel="stylesheet" href="./styles/styles.css" />

    <script src="./scripts/script.js" defer></script>
  </head>
  <body>
    <div class="main-wrapper">
      <div class="sub-wrapper">
        <h1>BlackJack v2.0</h1>
        <h3>Let's Play!</h3>
        <div class="blackjack-main-area-wrapper">
          <div class="blackjack-table-wrapper">
            <div class="player-table">
              <h3>You: <span>0</span></h3>
            </div>
            <div class="bot-table">
              <h3>Dealer: <span>0</span></h3>
            </div>
          </div>
          <div class="action-buttons-wrapper">
            <button class="btn btn-primary" id="btn_hit">Hit</button>
            <button class="btn btn-danger" id="btn_stand">Stand</button>
            <button class="btn btn-warning" id="btn_deal">Deal</button>
          </div>
          <div class="table-wrapper">
            <table>
              <tr>
                <th>Wins</th>
                <th>Losses</th>
                <th>Draws</th>
              </tr>
              <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

My script.js:

const btn_hit = document.getElementById("btn_hit");
const playerTable = document.getElementsByClassName("player-table")[0];

const numbers2Cards_DB = {
    1: "1",
    2: "2",
    3: "3",
    4: "4",
    5: "5",
    6: "6",
    7: "7",
    8: "8",
    9: "9",
    10: "10",
    11: "J",
    12: "Q",
    13: "K",
    14: "A",
}

btn_hit.addEventListener("click", (e) => {
  console.log(btn_hit);
  playerTable.appendChild(dealCard());
});

function dealCard() {
  const newCard = document.createElement("img");
  const min = 2;
  const max = 14;
  newCard.src = `../static/images/${
    numbers2Cards_DB[Math.floor(Math.random() * (max - min + 1)) + min]
  }.png`;
  return newCard;
}

The issue:

Every time I press the “Hit” button, the console shows a 404 error for the image path:

GET http://.../static/images/2.png
Status 404 Not Found

I have verified that the images are present in the /static/images directory.

Things I’ve tried:

Changing the image source to a static URL (which still doesn’t work half of the time):

newCard.src = "https://upload.wikimedia.org/wikipedia/commons/7/72/5_of_clubs.svg";

Changing the numbers2Cards_DB object to use external URLs, which also didn’t work:

const numbers2Cards_DB = {
  2: "https://upload.wikimedia.org/wikipedia/commons/4/42/2_of_clubs.svg",
  3: "https://upload.wikimedia.org/wikipedia/commons/4/4d/3_of_clubs.svg",
  // ... other URLs
};

Additional Test:

I created a new simplified project and it works fine with the same code structure:

/test_debugs
   /1
      /assets
         /images
         /sounds
   script.js
   styles.css
   index.html

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./script.js" defer></script>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="main-wrapper">
      <h1>Test Page</h1>
      <div class="btn-wrapper">
        <button id="soundButton1">Make Music</button>
      </div>
      <div class="cardsPlay-wrapper">
        <button id="dealCardButton1">Deal Cards</button>
        <div class="cardsWrapper"></div>
      </div>
    </div>
  </body>
</html>

script.js:

const btn_makeMusic = document.getElementById("soundButton1");
const hitSound = new Audio("./assets/sounds/hitSound.mp3");
const cardsArea = document.getElementsByClassName("cardsWrapper")[0];
const btn_DealCards = document.getElementById("dealCardButton1");

btn_makeMusic.addEventListener("click", (e) => {
  hitSound.play();
});

const numbers2Cards_DB = {
  1: "1",
  2: "2",
  3: "3",
  4: "4",
  5: "5",
  6: "6",
  7: "7",
  8: "8",
  9: "9",
  10: "10",
  11: "J",
  12: "Q",
  13: "K",
  14: "A",
};

btn_DealCards.addEventListener("click", (e) => {
  hitSound.play();
  const newImage = document.createElement("img");
  const min = 2;
  const max = 14;
  newImage.src = `./assets/images/${
    numbers2Cards_DB[Math.floor(Math.random() * (max - min + 1)) + min]
  }.png`;
  cardsArea.appendChild(newImage);
});

In this simplified setup, everything works perfectly.

Question:
Why am I getting a 404 error for the image paths in my original project, despite the images being in the correct directory? Is there something wrong with the relative path or the way the server is configured?

P.S.
Running this locally with Live Server extentsion for VS code

Thiết kế website giá rẻ

Danh mục

Issue with Image Paths in JavaScript — 404 Not Found Despite Correct Path