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

Question

我正在尝试遍历数组中定义的每个单独的图像源。创建一个新的图像元素，它将设置图像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>

Answer 1

这应该可以解决问题：

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);

Answer 2

您只需像这样取消对 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"
  },
  {
    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>

Answer 3

使用 forEach

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"
  }
];

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>

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

is it possible to iterate through each image src in a array and display it on your webpage.?

javascript

html

arrays

setattribute