从object获取图片并在HTML上显示

Question

我想从 JavaScript 中的 object 获取图像并通过 HTML 显示它。

文本部分工作正常，如电影名称等，但我看不到我的图像。 我唯一看到的是 black_adam.jpg 作为文本。 该图像与我的 index.html 在同一文件夹中。 我试图在imgFile: "/black_adam.jpg"前面添加一个斜杠。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <!-- FAVICON -->
    <link rel="icon" type="image/png" sizes="32x32" href="#" />
    <!-- FONTS -->

    <!-- ICON LIBRARY -->

    <!-- PROJECT STYLES -->
    <!-- <link rel="stylesheet" href="style.css"> -->

    <style>
      .movie {
        width: 200px;
        height: 300px;
        background-color: black;
        color: #fff;
      }
    </style>

  </head>
  <body style="font-family: 'Segoe UI', sans-serif">
    <div class="movie">
      <div class="img"></div>
      <h2 class="movie-title">/h2>
      <p class="release"></p>
      <p class="duur"></p>
      <p class="cast"></p>
    </div>

    <script>
      const movieEl = document.querySelector(".movie");

      const movie = {
        id: 1,
        name: "Black Adam",
        description:
          "Nearly 5,000 years after he was bestowed with the almighty powers of the Egyptian gods-and imprisoned just as quickly-Black Adam (Johnson) is freed from his earthly tomb, ready to unleash his unique form of justice on the modern world.",
        releaseYear: 2022,
        runtime: "2 hr 4 min",
        rating: 6.9,
        cast: ["Dwayne Johnson", " Aldis, Hodge", " Pierce Brosnan"],
        imgFile: "black_adam.jpg"
      };
      
      movieEl.innerHTML =
      `
      <div class="img">${movie.imgFile}
        <h2 class="movie-title">${movie.name}</h2>
        <p class="release">${movie.releaseYear}</p>
        <p class="duur">${movie.runtime}</p>
        <p class="cast">${movie.cast} </p>
      </div>
      `
    </script>
  </body>
</html>

为什么它不能这样工作？

Answer 1

你看到你的文件名作为文本的原因是你没有做任何事情来将图像显示为 HTML 中的图像

<div class="img">${movie.imgFile}这行，除了你的</div>没有关闭标签外，应该写成如下

<div class="img">
    <img src="${movie.imgFile}" />
</div>

或者如果您愿意，可以在一行中

<div class="img"><img src="${movie.imgFile}" /></div>