从JavaScript对象获取图片在HTML中无法显示的问题咨询

我想要从JavaScript对象中获取图片并通过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>

请问为何这种方式无法正常显示图片？

核心原因 #

你只是把图片路径的字符串直接插入到HTML中，浏览器会将其当作普通文本渲染，不会自动识别为图片资源。网页中展示图片必须依赖<img>标签，通过该标签的src属性指定图片路径，浏览器才会加载并显示图片。

修复代码 #

修改模板字符串部分，将${movie.imgFile}替换为<img>标签，把路径赋值给src属性，同时可以添加alt属性提升可访问性：

movieEl.innerHTML =
`
<div class="img">
  <img src="${movie.imgFile}" alt="${movie.name} 海报">
  <h2 class="movie-title">${movie.name}</h2>
  <p class="release">${movie.releaseYear}</p>
  <p class="duur">${movie.runtime}</p>
  <p class="cast">${movie.cast.join(', ')} </p>
</div>
`

另外补充：演员列表是数组，直接插入会显示默认的逗号分隔格式，用join(', ')可以让演员名字的分隔更美观自然。

内容的提问来源于stack exchange，提问作者Danny