Creé un sitio web que tiene numerosas etiquetas img. Me preguntaba si hay alguna manera de obtener las direcciones URL de las imágenes de un archivo JSON en lugar de usar las etiquetas img sin tener que comenzar desde cero.
<main> <div><img src="https://image.tmdb.org/t/p/w500/pNrQaH0ATrz9wFrNpwfB1aU4MpK.jpg"/ </div> <div><img src="https://image.tmdb.org/t/p/w500/mYkTq569KOtjdq5zo9mrEY6ecip.jpg"/></div> <div><img src="https://image.tmdb.org/t/p/w500/7lyBcpYB0Qt8gYhXYaEZUNlNQAv.jpg"/> </main>Simplemente puede usar los selectores de consultas y el atributo .src de cada elemento DOM para configurarlos.
Aquí está mi ejemplo de archivo HTML y JSON:
HTML:
<main> <img class="image" id="1" /> <img class="image" id="2"/> <img class="image" id="3"/> </main>JSON:
{ looneyTunes: "https://image.tmdb.org/t/p/w500/pNrQaH0ATrz9wFrNpwfB1aU4MpK.jpg", backDown: "https://image.tmdb.org/t/p/w500/mYkTq569KOtjdq5zo9mrEY6ecip.jpg", backFuture: "https://image.tmdb.org/t/p/w500/7lyBcpYB0Qt8gYhXYaEZUNlNQAv.jpg" }Mi javascript se vería así:
const domImages = document.querySelectorAll('.image'); fetch('./images.json') .then(res => { if (!res.ok) { throw new Error("HTTP error " + res.status); } return res.json(); }) .then(json => { for (let i = 0; i < domImages.length; i++) { const imageId = domImages[i].id; switch(imageId) { case '1': domImages[i].src = json.looneyTunes; break; case '2': domImages[i].src = json.backDown; break; case '3': domImages[i].src = json.backFuture; break; } }) .catch(err => { console.log(err); }) })Desglose:
El selector de consulta todo está encontrando todos los elementos DOM con la clase de "imagen".
const domImages = document.querySelectorAll('.image');Luego buscamos nuestro archivo JSON que contiene todas nuestras imágenes.
fetch('./images.json')Tomamos la respuesta y obtenemos el JSON que contiene
.then(res => { if (!res.ok) { throw new Error("HTTP error " + res.status); } return res.json(); })Luego creamos un ciclo for para verificar cada uno de nuestros elementos DOM de imagen.
for (let i = 0; i < domImages.length; i++) {Obtenemos la ID de cada elemento DOM para verificar qué imagen se supone que debe establecerse como fuente:
const imageId = domImages[i].id;Después de esto, usamos Switch para verificar qué ID tiene este elemento DOM. Si es '1', usamos el atributo .src para asignar la imagen de Looney Tunes como fuente.
switch(imageId) { case '1': domImages[i].src = json.looneyTunes; break;Luego simplemente repetimos para los demás y detectamos cualquier error que obtengamos en la parte inferior.
case '2': domImages[i].src = json.backDown; break; case '3': domImages[i].src = json.backFuture; break; } }) .catch(err => { console.log(err); }) })Espero que esto responda tu pregunta. Avíseme si tiene algún problema con él o si este no es el enfoque que estaba buscando.