Question

我正在学习 JS 教程，但遇到了一些问题

目前正在学习使用 javascript 显示图像的动态方式。

无论我听多少次并重新编码，添加/删除不必要的分号、斜线或任何东西..它就是行不通。

我 3 天前试过这个，当它工作时，复制了同样的东西，但仍然没有改进，它只是显示一个空白的 html 文档，没有显示图像。

如果我编写静态版本，图像可以正常显示，但是 html 文件中有很多图像和 DIV。

我开始怀疑文件夹的放置和订单以及文件的导入是否有问题。

-Desktop > website > frontend > src > index.html, style.css, app.js, data.js,

-桌面 > 网站 > 前端 > src > 屏幕 > template-generator.js

-桌面 > 网站 > 前端 > src > 图像 >（所有图像）

我使用的是 Bootstrap 5 框架。

任何帮助将不胜感激。提前致谢。

这是html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>

    <link rel="stylesheet" href="style.css">
    <!------------------------------------------------------Fonts & BS Plugins-------------------------------------------------------------->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>

  <body>
    <section class="portfolio-section" id="portfolio">
      <div class="container padding text-center"><br><br><br><br><br>
        <h2>PORTFOLIO</h2>
        <h1>PORTFOLIO</h1>
        <div class="row padding text-center">
          <div class="col-lg-3"><a href="" class="portfolio-menu"><h3>L0GOS</h3></a></div>
          <div class="col-lg-3"><a href="" class="portfolio-menu"><h3>P0STERS</h3></a></div>
          <div class="col-lg-3"><a href="" class="portfolio-menu"><h3>TYP0GRAPHY</h3></a></div>
          <div class="col-lg-3"><a href="" class="portfolio-menu"><h3>RENDERS</h3></a></div>
        </div>
      </div>
    </section>
    <!----------------------- IMAGES CONTENT USING CSS & JS ------------------------->
    <main id="main-container">
      <!--Image displaying using JS-->
    </main>
  </body>

这是“data.js”文件（所有图像的列表）：

export default {
  logos: [
    {
      _id: '1',
      name: 'GM HAUS Logo',
      image: '/images/logo-1.jpg',
    },
    {
      _id: '2',
      name: 'Doom Bikes Logo',
      image: '/images/logo-2.jpg',
    },
    {
      _id: '3',
      name: 'CCNA 200-301 Logo',
      image: '/images/logo-3.jpg',
    },
    {
      _id: '4',
      name: 'Trailscapes Logo',
      image: '/images/logo-4.jpg',
    },
    {
      _id: '5',
      name: 'Pro Code Logo',
      image: '/images/logo-5.jpg',
    },
    {
      _id: '6',
      name: 'Grove Hill Wine Logo',
      image: '/images/logo-6.jpg',
    },
  ],
};

这是“模板生成器.js”

import data from '../data.js';

const Gallery = {
  render: () => {
    const { logos } = data;
    return `
      <div class="container text-center">
        <div class="row justify-content-md-center logos">
          ${logos.map( 
            (logo) => `
          <div class="col-lg-4">
            <div class="logo">
              <a href="/#/logo/${logo._id}">
                <img src="${logo.image}" alt="${logo.name}" class="img-fluid">
              </a>
              <div class="logo-name">
                <a href="/#/logo/1">
                  ${logo.name}
                </a>
              </div>
            </div>
          </div>
          `)}
        </div>
      </div>
    `;
  },
};
export default Gallery;

这是“app.js”（应用加载的地方）：

import Gallery from './screens/template-generator.js';

const router = () => {
  const main = document.getElementById("main-container");
  main.innerHTML = Gallery.render();
}
window.addEventListener("load", router);

Javascript 动态显示图像不起作用

0 个答案: