Estoy tratando de agregar etiquetas <img> dinámicamente a mi DOM usando FileSystem para escanear a través de mi carpeta de imágenes.
Mi idea es crear un elemento <img> para cada imagen que tengo en la carpeta "imágenes".
Por el momento puedo crear los elementos <img> o crear una matriz con los nombres de los archivos de la carpeta, pero por una razón misteriosa, cuando uno las piezas nada funciona.
Alguien podría ayudarme a averiguar qué está pasando.
const imgContainer = document.getElementById("cover"); const newDiv = document.createElement("div"); newDiv.setAttribute("class", "image-ctn"); imgContainer.appendChild(newDiv); const addImage = (imgSource) => { const newImage = document.createElement("img"); newImage.setAttribute("class", "face"); newImage.src = `images/${imgSource}`; imgContainer.appendChild(newDiv); newDiv.appendChild(newImage); }; // const fs = require("fs"); const imagesPath = "images"; const pattern = ".jpg"; let imageArray = fs.readdirSync(imagesPath).filter((str) => { return str.includes(pattern); }); imageArray.map((imageFile) => { addImage(imageFile); }); <!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" /> <link rel="stylesheet" href="style.css" /> <title>Deconstructed</title> </head> <body> <header> <div class="menu"> <nav>MENU</nav> </div> </header> <main class="main-container"> <div id="cover"></div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Lectus proin nibh nisl condimentum id venenatis a condimentum. Id diam maecenas ultricies mi eget mauris. </div> </main> <!-- CUSTOM SCRIPTS --> <script src="script.js"></script> </body> </html>