如何解决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(将#修改为@）