Soy un principiante de javascript y este es mi primer proyecto en la escuela. Estoy tratando de mostrar una imagen con el título, etc., pero no sé cómo agregar las imágenes a mi matriz y mostrarlas.
const products = [ { id: 1, title: "title", description: "description", price: 123}, { id: 2, title: "title B", description: "description B", price: 456 }, { id: 3, title: "title C", description: "description C", price: 789 }, ]; function displayProducts() { let container = document.querySelector(".container"); for (let product of products) { container.innerHTML += `<div class="item">` + `<h2>${product.title}</h2>` + `<p>${product.description}</p>` + `<p>Pris: <b>${product.price}</b></p>` + `<button onclick="addToCart(${product.id})">Buy</button>`; } }Simplemente agregue otro índice que tome la fuente/ruta de la imagen como valor y lo complete dentro de un div, tal como lo hizo para el título/descripción. Para la ruta de la imagen, es posible que desee agregar una ruta relativa/absoluta de manera adecuada.
const products = [ { id: 1, title: "title", description: "description", price: 123, img: 'images/image1.jpeg'}, { id: 2, title: "title B", description: "description B", price: 456, img: 'images/image3.jpeg' }, { id: 3, title: "title C", description: "description C", price: 789, img: 'images/image3.jpeg' }, ]; function displayProducts() { let container = document.querySelector(".container"); for (let product of products) { container.innerHTML += `<div class="item">` + `<h2>${product.title}</h2>` + `<p>${product.description}</p>` + `<p>Pris: <b>${product.price}</b></p>` + `<img src=${product.img} /> `<button onclick="addToCart(${product.id})">Buy</button>`; } } function displayProducts() { let container = document.querySelector(".container"); for (let product of products) { container.innerHTML += `<div class="item">` + `<h2>${product.title}</h2>` + `<p>${product.description}</p>` + `<p>Pris: <b>${product.price}</b></p>` + `<p><img src="photoUrl.png" alt="photo" /></p>` + `<button onclick="addToCart(${product.id})">Buy</button>`; } }