Solo quiero preguntar esto (tenga en cuenta que soy nuevo en programación y solo practico durante mi tiempo libre)
Tengo 10 imágenes guardadas localmente en una carpeta (llamada "diseño de imágenes") dentro de mi carpeta de proyecto
¿Cómo puedo mostrar todas las imágenes dentro de esa carpeta en un div individual en el HTML usando JSON (y javascript si es necesario)?
Intenté arreglar esto pero fue en vano. El div solo muestra una cadena de texto en la parte delantera.
Formato JSON y JS Aquí está mi código (traté de mostrar 1 solo para probar):
let images = { id: "1", name: "Design 1", imageUrl: "/design-images/1.png", }; let output = document.getElementById("myImage"); output.innerHTML = images.imageUrl;HTML
<body> <div id="myImage"> </body>Aquí está el sitio web de mi práctica: puede ver el problema cuando se desplaza hacia abajo hasta Ver mis trabajos. sección. https://vladesplana.web.app/
Buenas tardes. Primero, debe cerrar su etiqueta <div> :)
Luego, debe agregar una etiqueta <img> a su HTML. Puede hacerlo usando HTML, pero luego no podrá agregar automáticamente nuevas imágenes insertadas en su carpeta.
Sugiero hacer lo siguiente en javascript:
let myDiv = document.getElementById("myImage"); let img = document.createElement("img"); img.src = images.imageUrl; myDiv.appendChild(img);La primera línea obtiene su div en una variable; la segunda línea crea un nuevo elemento de imagen; la tercera línea coloca la fuente de su imagen en ella y la última línea agrega el elemento de imagen a su html como elemento secundario de su div.
Espero que esto sea lo suficientemente claro para ayudarlo a corregir su código.
Todo lo mejor, Benjamín
Prueba esto,
const images =[ // you have to create 10 objs instead of two { id: "1", name: "Design 1", imageUrl: "/design-images/1.png", },{ id: "2", name: "Design 2", imageUrl: "/design-images/2.png", }; ] const imagesOnSingleDiv=images.map(img=> `<img src=${img.imageUrl} alt=${img.name}>`).join("\n") let output = document.getElementById("myImage"); output.innerHTML=imagesOnSingleDiv El imagesOnSingleDiv contiene el contenido para la output