我是 javascript 初學者，這是我在學校的第一個專案。我試圖顯示帶有標題等的影像，但我只是不知道如何將影像添加到我的陣列中并顯示它們。
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 >`
`<h2>${product.title}</h2>`
`<p>${product.description}</p>`
`<p>Pris: <b>${product.price}</b></p>`
`<button onclick="addToCart(${product.id})">Buy</button>`;
}
}
uj5u.com熱心網友回復：
只需添加另一個索引，將影像源/路徑作為值，并將其填充到 div 中，就像您為標題/描述所做的那樣。對于影像的路徑，您可能希望適當地添加相對/絕對路徑。
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 >`
`<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>`;
}
}
uj5u.com熱心網友回復：
function displayProducts() {
let container = document.querySelector(".container");
for (let product of products) {
container.innerHTML =
`<div >`
`<h2>${product.title}</h2>`
`<p>${product.description}</p>`
`<p>Pris: <b>${product.price}</b></p>`
`<p><img src="photoUrl.png" alt="將影像添加到陣列" /></p>`
`<button onclick="addToCart(${product.id})">Buy</button>`;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/376469.html
標籤：javascript 数组 图片
下一篇：圖片上的媒體查詢