JavaScript DOM fait une demande de serveur

Question

Lorsque je charge la page sans le code js suivant, cela fonctionne correctement, mais lorsque je crée l'élément html à l'aide de DOM, il envoie une requête au serveur en utilisant la même URL de page,

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);
        }
      }

J'ai testé le code lorsque j'ai commenté le code js DOM, puis il n'a fait aucune autre demande de serveur

C'est la première demande

GET /brands/dodge 200 2109.074 ms - 16952

C'est la deuxième requête déclenchée lorsque je crée l'élément DOM html

GET /brands/undefined 200 8297.877 ms - 16781

Answer 1

Cette demande GET est faite par 标记的 src 属性发送的。并且src的值为undefined。这意味着您的代码中的vehicle.thumbnail 是未定义.

Voir Comment l'attribut src de la balise img est-il implémenté ?