获取 JSON 会破坏网站并且无法正确显示内容

Question

我有一个包含很多图片的网站。它们具有相同的代码，但有一些更改。我想我可以使用带有对象的数组来更轻松地呈现内容，而无需一遍又一遍地编写相同的 HTML。因此，我编写了一个简单的代码来 .map() 对象并返回一个字符串，然后 .join('') 字符串。现在它只使用 JS 就可以完美工作，但是当我尝试使用 JSON 时，它有点崩溃。 JSON 被正确解析，我的函数返回要插入到 HTML 中的正确代码，但当我加载页面时，什么也没有。我可以在检查器中看到它，但页面上看不到任何内容......

我的代码：

const paintingSection = document.querySelector(".painting-div-container");

const loadPictures = (picturesArr) => {
  paintingSection.innerHTML = picturesArr
    .map(
      (picture) =>
        `
<div class="painting-container ${picture.align} scroll-hidden">
  <div class="text-container">
    <h3 class="absolute pain-head">${picture.heading}</h3>
    <p class="absolute pain-info">${picture.description}</p>
  </div>
    <img
      src="../../media/obrazy/v-zajeti-barev-2/${picture.fileName}"
      alt="${picture.alt}"
      class="painting"
      
    />
</div>
`
    )
    .join("");
};

fetch("./paintings.json")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok " + response.statusText);
    }
    return response.json();
  })
  .then((data) => {
    loadPictures(data);
  })
  .catch((error) => {
    console.error("Error fetching the JSON file:", error);
  });

ps：我知道 HTML 并不完美，但我太蹩脚了，现在无法更改所有内容......

JSON：

[
  {
    "heading": "A jako Anděl - 2013",
    "description": "akryl na šepsované desce, 50x60",
    "fileName": "A-JAKO-ANDĚL.jpg",
    "alt": "A jako anděl - obraz",
    "align": "vert"
  },
  {
    "heading": "Barevná láska - 2013",
    "description": "akryl na plátně, 100x130",
    "fileName": "Barevná-láska-2.jpg",
    "alt": "Barevná láska 2 - obraz",
    "align": "hori"
  }
]

我得到的输出：

预期输出：

我确实尝试了 console.logging 一切，它是正确的。即使在 HTML 中，一切仍然是它应该的样子，基本上没有显示。我确实从代码的不同部分收到一个错误，指出 img 未定义。可能是因为它没有等待解析发生......

我得到的HTML：

<div class="painting-container vert scroll-hidden">
  <div class="text-container">
    <h3 class="absolute pain-head">A jako Anděl - 2013</h3>
    <p class="absolute pain-info">akryl na šepsované desce, 50x60</p>
  </div>
    <img src="../../media/obrazy/v-zajeti-barev-2/A-JAKO-ANDĚL.jpg" alt="A jako anděl - obraz" class="painting">
</div>

Answer 1

问题是我有一个

scroll-hidden

类设置，它将 opacity 设置为 0。我还有一个脚本，它有一个相交观察器，用于检查元素是否可见，如果是，它会删除此类制作滚动动画。但该脚本在使用 JSON 加载任何内容之前就已运行。所以

querySelectorAll()

加载了没有元素。

通过为需要 wait JSON 的所有内容创建函数并在

.then()

中调用它来修复