[編輯：修復了一個我不小心留下的嘗試修復] 我正在參加一個 SkillShare 課程（我知道，那是一粒鹽）為我的自由藝術頁面創建一個回應式圖片庫。當前的目標是使用 Javascript 用影像填充頁面。我正在嘗試在名為“image-grid”的類中創建一個名為“image”的 div；'image' 應包含來自名為 'images' 的檔案夾中的繪圖。
我的相關HTML：
<body>
<div class="gallery-container">
<h2 class="gallery-title">Illustrations and Comics by Gwen</h2>
<div class="image-grid">
</div>
</div>
</body>
我的 JavaScript：
const imagesList = [
{
imageUrl: "images/DyingToLive.png",
title: "Dying to Live",
},
];
const imageGrid = document.querySelector(".image-grid");
const populateImages = () => {
imagesList.forEach((i) => {
const image = document.createElement("div");
image.classList.add("image");
const img = document.createElement("img");
img.src = i.imageUrl;
img.alt = i.title;
image.appendChild(img);
imageGrid.appendChild(image);
});
};
populateImages();
教師版js：
抱歉，如果我遺漏了一些簡單的東西。我和我的搭檔都逐行檢查了差異。我有自己的影像名稱/標題，而且我沒有使用縮略圖，所以我使用 imageUrl 而不是 thumbUrl。除此之外，它看起來和我一模一樣。
問題是，當我在瀏覽器中啟動它時，沒有影像，當我查看源代碼時，該影像網格類中沒有“影像”div 的跡象。任何方向將不勝感激。
uj5u.com熱心網友回復：
似乎div.classList.add("image");沒用，因為div當時沒有定義，其他元素是由創建的document，嘗試洗掉它
const imagesList = [
{
imageUrl: "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iXwouvL_DCbc/v0/150x-1.jpg",
title: "Dying to Live",
},
];
const imageGrid = document.querySelector(".image-grid");
const populateImages = () => {
imagesList.forEach((i) => {
const image = document.createElement("div");
//div.classList.add("image");
const img = document.createElement("img");
img.src = i.imageUrl;
img.alt = i.title;
image.appendChild(img);
imageGrid.appendChild(image);
});
};
populateImages();<body>
<div class="gallery-container">
<h2 class="gallery-title">Illustrations and Comics by Gwen</h2>
<div class="image-grid">
</div>
</div>
</body>uj5u.com熱心網友回復：
改變 div.classList.add("image"); 到 image.classList.add("image");
uj5u.com熱心網友回復：
您沒有帶有 DyingToLive.png 的 img 名稱，將名稱更改為存在 img 名稱。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506644.html
標籤：javascript html
下一篇：比Js中的bug更重要