0

Tengo un archivo html y un archivo js, lo que busco es: Llamar las imágenes desde javascript y visualizarla en mi archivo html, al ingresarlas manualmente las puedo visualizar, pero al usar el script no las visualizo, de antemano gracias.

<html>
<body >
<h1 class="title">Catálogo de Productos Optisiloé</h1>
<div class="transp">
<!-- Bloque para ingresar imágenes actualmente funciona ingresandolas 1 a 1-->      
<img id="imagen" src="img/img1.png">
</div>
<!-- Llamado al script -->
<script src="js/app.js"></script>
</body>
</html> 

Archivo JavaScript app.js Lo que debería hacer es usar el ciclo for para crear un objeto img, que está ubicado en la carpeta img, asignando al final del nombre el número de la variable i junto con la extensión, previo las imágenes ya se encuentran dentro de la carpeta img y van de la img1.png a img9.png

let imagen = document.getElementById("imagen");
for (let i = 1; i <= 9; i++){
    let newimg = document.createElement("img");
    newimg.setAttribute("src", "img/img"+i+".png"); 
}

1 respuesta 1

0

Te falta agregar la nueva imagen al DOM para que se vea puedes checar este ejemplo Y en tu caso abría algo como

<div id="images" class="transp">
</div>

let images = document.getElementById("images");
for (let i = 1; i <= 9; i++){
    let newimg = document.createElement("img");
    newimg.setAttribute("src", "img/img"+i+".png"); 
    images.appendChild(newimg);
}

No confío 100% en el código por qué lo estoy escribiendo en el celular pero creo que te puede dar una buena idea

2
  • Gracias @Vago Binario esto era lo que estaba buscando. Hay la posibilidad de que se pueda usar el script para ingresar desde un archivo para cada imagen una descripción. <img id="imagen" data-caption="Descripción 1" src="img/img1.png"> Que se pueda llamar data-caption algún archivo para que cargue la descripción de la imagen, es decir donde dice Descripción 1 cargue un archivo y me traiga la descripción para cada una de las imágenes.
    – Jair Vides
    Commented el 26 oct. 2021 a las 12:33
  • Si es posible pero solo te lo recomendaria si es muy necesario hacerlo desde un archivo puedes ver un muy buen ejemplo aqui mi consejo seria mejor usar un arreglo donde guardes las descripciones let descripciones = ['Descripcion 1','Descripcion 2',...,'Description N'] y ya agregar el atributo usando tu arreglo newimg.setAttribute("caption", descripciones[i-1]); Commented el 26 oct. 2021 a las 17:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.