如何在 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>