Javascript 动态显示图像不起作用

问题描述

我正在学习 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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript twitter-bootstrap

Javascript 动态显示图像不起作用

问题描述

解决方法

编程问答相关问答