【发布时间】：2021-08-01 13:57:45
【问题描述】：
我正在学习一个 JS 教程，但遇到了一些问题
目前正在学习使用 javascript 显示图像的动态方式。
无论我听过多少次并重新编码，添加/删除不必要的分号、斜杠或任何东西.. 都是行不通的。
我在 3 天前试过这个，当它工作时，复制了同样的东西，但仍然没有改进，它只是显示一个空白的 html 文档，没有显示图像。
如果我写的是静态版本，图片可以正常显示，但是html文件中有很多图片和DIV。
我开始怀疑文件夹放置和订单以及文件导入是否存在问题。
-桌面 > 网站 > 前端 > 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',
},
],
};
这是“template-generator.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);
【问题讨论】：
-
您是否在 chrome 的检查元素菜单中的控制台日志中看到任何错误？这将有助于我们更准确地调试问题
-
你的
app.js在 HTML 中的哪个位置？
标签： javascript html css twitter-bootstrap