Me gustaría agregar una imagen a un sitio web usando una matriz de JavaScript. Encontré un código y luego traté de cambiarlo. Pero no puedo hacer que funcione. Mi código no muestra la imagen en el sitio.
Código que encontré:
const imageOut = document.querySelector('.image-out'); for (let key in images) { let img = document.createElement('img'); img.setAttribute('data-key', key); img.src = 'images/' + key + '.png'; imageOut.append(img); } etiqueta html: <div class="image-out"></div> Matriz:
const images = {"JD-03-128" :{},"JD-05-128": {},"JD-07-128": {},"JD-11-128": {},"JD-12-128": {},"JD-13-128": {},"JD-15-128": {}};Mi código:
var imageOut = document.querySelector(".image-out"); for (let key in a) { let img = document.createElement('img'); img.setAttribute('data-key', key); img.src = 'image/'+key+'.jpg'; imageOut.append(img); } etiqueta html: <div class="image-out"></div> Matriz:
const a = {"a":{},"b":{},"c":{},"d":{},"e":{},"f":{},"g":{}};imagen mi código: jpg, el nombre coincide absolutamente, la carpeta del nombre coincide absolutamente con la carpeta en mi código. donde esta mi problema
Si desea agregar (agregar) varias imágenes a un documento HTML usando una matriz, puede hacer algo como lo que se muestra a continuación.
const rootElement = document.getElementById('root') const array = [ 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/238/200/300', 'https://picsum.photos/id/239/200/300' ] array.forEach((src) => { const imageElement = document.createElement('img') imageElement.src = src rootElement.appendChild(imageElement) }) img{margin:5px} <div id='root'></div> Básicamente, estoy creando un elemento <img src='' /> para cada elemento de la matriz. Los elementos de la matriz son la url (src) de las imágenes. Esos se agregan como un atributo a imageElement como imageElement.src = src y finalmente se agregan como un elemento secundario de rootElement