是否可以遍历数组中的每个图像 src 并将其显示在您的网页上？

如何解决是否可以遍历数组中的每个图像 src 并将其显示在您的网页上？

我正在尝试遍历数组中定义的每个单独的图像源。创建一个新的图像元素，该元素将设置图像 1、图像 2 等的属性 src，直到数组中不再有新的图像源可以循环并将其显示到网页。

const u = document.querySelector(".divs:nth-child(3)");
const a = [
  {
    name: "BBQ Becky",img: "https://assets.codepen.io/1179484/bbqbecky_1.jpg"
  },{
    name: "Permit Patty",img: "https://assets.codepen.io/1179484/permitpatty_1.jpg"
  },{
    name: "Pool Patrol Puala",img: "https://assets.codepen.io/1179484/poolpatrolpaula_1.jpg"
  },{
    name: "Wake Up Suzie",img: "https://assets.codepen.io/1179484/wakeupsuzie_1.jpg"
  },{
    name: "ID Adam",img: "https://assets.codepen.io/1179484/idadam_1.jpg"
  }
];

for (i = 0; i < a.length; i++) {
  var image = document.createElement("img");
  image.setAttribute("src",a[i].img);
  u.appendChild(image);
}

* {
  margin: 0;
  padding: 0;
}
#s1 {
  height: 100vh;
  widht: 100vw;
  background: salmon;
}

img {
  height: 100px;
}

<section id="s1">
  <div class="divs"></div>
  <div class="divs"></div>
  <div class="divs"></div>
</section>

解决方法

这应该可以解决问题：

const a = [
  {
    name: "BBQ Becky",img: "https://assets.codepen.io/1179484/bbqbecky_1.jpg",},{
    name: "Permit Patty",img: "https://assets.codepen.io/1179484/permitpatty_1.jpg",{
    name: "Pool Patrol Puala",img: "https://assets.codepen.io/1179484/poolpatrolpaula_1.jpg",{
    name: "Wake Up Suzie",img: "https://assets.codepen.io/1179484/wakeupsuzie_1.jpg",{
    name: "ID Adam",img: "https://assets.codepen.io/1179484/idadam_1.jpg",];

const renderImages = (arr) => {
  for (let i in arr) {
    let image = document.createElement("img");
    image.setAttribute("src",arr[i].img);
    document.body.appendChild(image);
  }
};

renderImages(a);

,

您只需要像这样取消引用 a[i].img 部分：

const u = document.querySelector(".divs:nth-child(3)");
const a = [
  {
    name: "BBQ Becky",img: "https://assets.codepen.io/1179484/bbqbecky_1.jpg"
  },img: "https://assets.codepen.io/1179484/permitpatty_1.jpg"
  },img: "https://assets.codepen.io/1179484/poolpatrolpaula_1.jpg"
  },img: "https://assets.codepen.io/1179484/wakeupsuzie_1.jpg"
  },img: "https://assets.codepen.io/1179484/idadam_1.jpg"
  }
];

for (i = 0; i < a.length; i++) {
  var image = document.createElement("img");
  image.setAttribute("src",a[i].img);
  u.appendChild(image);
}

* {
  margin: 0;
  padding: 0;
}
#s1 {
  height: 100vh;
  widht: 100vw;
  background: salmon;
}

img {
  height: 100px;
}

<section id="s1">
  <div class="divs"></div>
  <div class="divs"></div>
  <div class="divs"></div>
</section>

,

使用 forEach

const u = document.querySelector(".divs:nth-child(3)");
const a = [
  {
    name: "BBQ Becky",img: "https://assets.codepen.io/1179484/idadam_1.jpg"
  }
];

a.forEach(o => {
let image = document.createElement("img");
  image.setAttribute("src",o.img);
  u.appendChild(image);
});

* {
  margin: 0;
  padding: 0;
}
#s1 {
  height: 100vh;
  widht: 100vw;
  background: salmon;
}

img {
  height: 100px;
}

<section id="s1">
  <div class="divs"></div>
  <div class="divs"></div>
  <div class="divs"></div>
</section>