如何在 JS 数组中显示图像？

Question

我尝试的每一种方法，我收到的要么是欠精细，要么是物品的描述，而不是图片本身。 这是我的代码（使用我尝试过的不同方法）：

添加显示全部

  <label for="Name">Name</label>
  <input id="Name" /><br />
  <button onclick="searchByName()" class="btn btn-info">
    Search by Name
  </button>
  <input id="Search" />
  <label for="Search">Search</label>
  <br />
  <div class="alert alert-primary" id="display"><h1>My Contacts</h1></div>
</div>
<!-- <img id="imgFemale" src="images/female-icon-7897.png">
<img id="imgMale" src="images/person-icon-1687.png"> -->
<script>
  const imgFemale ="images/female-icon-7897.png"
  const imgMale = "images/person-icon-1687.png"
 
  let myContacts = [
    { Name: "Hubby ", gender: "male", Image: imgFemale.src="images/person-icon-1687.png"},
    { Name: "Mom", gender: "female", img: imgFemale.value },
    { Name: "Shannon", gender: "female", img: [imgFemale].innerHTML },
    { Name: "Dad", gender: "male", img: imgMale },
  ];
  function add() {
    console.log("add pressed");
    myContacts.push({
      id: myContacts.length + 1,
      Name: Name.value,
    });
  }

  function showAll() {
    console.log("showAll pressed");
    display.innerHTML = "<h1>My Contacts</h1>";
    for (let index = 0; index < myContacts.length; index++) {
      display.innerHTML += `<div class='alert alert-${myContacts[index]}'>
        <button class="btn btn-danger" onClick='remove(${index})'> Delete </button> 
        ${myContacts[index].Name} , ${myContacts[index].gender} , ${myContacts[index].img}</div>`;
    }
  }

Answer 1

尝试用这样的img元素包装它： <img src=${myContacts[index].img}/>

 function showAll() { console.log("showAll pressed"); display.innerHTML = "<h1>My Contacts</h1>"; for (let index = 0; index < myContacts.length; index++) { display.innerHTML += `<div class='alert alert-${myContacts[index]}'> <button class="btn btn-danger" onClick='remove(${index})'> Delete </button> ${myContacts[index].Name}, ${myContacts[index].gender}, <img src=${myContacts[index].img}/> </div>`; } }

Answer 2

{ Image: imgFemale.src="images/person-icon-1687.png"}

这条线没有多大意义。 Image:需要一个值（如Image:"images/person-icon-1687.png" ），但您正在编写一个带有=符号 (?) 的作业

此外， imgFemale是一个字符串，但你正在做imgFemale.src="...png" 。 字符串没有.src 。 .value也是如此。

[imgFemale].innerHTML只是将字符串"images/person-icon-1687.png"放在数组["images/person-icon-1687.png"]中，然后从这个数组中读取它的.innerHTML属性，当然不存在。

最后，由于您的联系人已经具有男性/女性性别，您无需在 object 中为男性和女性重复图像 URL，您可以只使用性别：

const images = {
    male : "images/person-icon-1687.png",
    female : "images/female-icon-7897.png"
}

let myContacts = [
    { Name: "Hubby ", gender: "male" },
    { Name: "Mom", gender: "female" },
    { Name: "Shannon", gender: "female" },
    { Name: "Dad", gender: "male" },
];

然后您只需以这种方式创建图像：

for (let contact of myContacts) {
    display.innerHTML += `<img src="${images[contact.gender]}"/>`
}

另外，不确定您要对 HTML 属性中的alert-${myContacts[index]}做什么，因为myContacts[index]是 object？

Answer 3

使用img: imgMale和myContacts[index].img

 const imgFemale ="images/female-icon-7897.png" const imgMale = "images/person-icon-1687.png" let myContacts = [ { Name: "Hubby ", gender: "male", img: "images/person-icon-1687.png"}, { Name: "Mom", gender: "female", img: imgFemale }, { Name: "Shannon", gender: "female", img: imgFemale }, { Name: "Dad", gender: "male", img: imgMale }, ]; function add() { console.log("add pressed"); myContacts.push({ id: myContacts.length + 1, Name: Name.value, }); } function showAll() { console.log("showAll pressed"); display.innerHTML = "<h1>My Contacts</h1>"; for (let index = 0; index < myContacts.length; index++) { display.innerHTML += `<div class='alert alert-${myContacts[index]}'> <button class="btn btn-danger" onClick='remove(${index})'> Delete </button> ${myContacts[index].Name}, ${myContacts[index].gender}, ${myContacts[index].img}</div> <img src=${myContacts[index].img}/> </div>`; } } showAll()

 <label for="Name">Name</label> <input id="Name" /><br /> <button onclick="searchByName()" class="btn btn-info"> Search by Name </button> <input id="Search" /> <label for="Search">Search</label> <br /> <div class="alert alert-primary" id="display"><h1>My Contacts</h1></div>