JavaScript DOM 發出伺服器請求

Question

當我載入沒有以下 js 程式碼的頁面時，它運作得很好，但是當我使用 DOM 建立 html 元素時，它會如何使用相同的頁面 url 發出伺服器請求，

const isHideVariants = document.querySelector("#hidevariants");
      const vehiclesList = document.querySelector(".brand-vehicles-list");

      let vehicles = <%- JSON.stringify(vehicles) %>;

      displayVehicles();

      function displayVehicles() {
        clearVehicles();
        vehicles.forEach((vehicle) => {
          const anchorTag = document.createElement("a");
          const img = document.createElement("img");
          const p = document.createElement("p");
          anchorTag.href = `/vehicles/${vehicle._id}`;
          anchorTag.classList.add("brand-vehicle");
          img.src = vehicle.thumbnail;
          img.alt = "vehicle thumbnail";
          p.textContent = vehicle.name;
          anchorTag.appendChild(img);
          anchorTag.appendChild(p);
          vehiclesList.appendChild(anchorTag);
        });
      }

      function clearVehicles() {
        while (vehiclesList.firstChild) {
          vehiclesList.removeChild(vehiclesList.firstChild);
        }
      }

當我註解 js DOM 程式碼時，我測試了程式碼，然後它沒有發出任何其他伺服器請求

這是第一個請求

GET /brands/dodge 200 2109.074 ms - 16952

這是我創建 html DOM 元素時觸發的第二個請求

GET /brands/undefined 200 8297.877 ms - 16781

Answer 1

此 GET 請求是由 標記的 src 屬性發送的。且src的值為undefined。這意味著您的程式碼中的vehicle.thumbnail 是未定義。

查看img標籤的src屬性是如何執行的？