如何在JavaScript中为每本图书配置并展示不同的封面图片

解决方案 #

修改思路 #

• 给每本图书的配置对象新增coverImg字段，存储对应图书的专属封面地址
• 渲染img标签时，将固定的占位图地址替换为当前图书的coverImg字段值

完整修改代码 #

JavaScript代码

const books = [{
    title: "book1",
    author: "x",
    coverImg: "这里填book1的封面地址"
  },
  {
    title: "book2",
    author: "y",
    coverImg: "这里填book2的封面地址"
  },
  {
    title: "book3",
    author: "z",
    coverImg: "这里填book3的封面地址"
  }
];
myfunction(books);

function myfunction(books) {
  let content = document.querySelector("#content");
  let list = content.appendChild(document.createElement('ul'));
  for (var i = 0; i < books.length; i++) {
    let item = list.appendChild(document.createElement('li'))
    let book = item.appendChild(document.createElement('p'))
    // 替换固定图片地址为当前图书的coverImg字段
    book.innerHTML = books[i].title + '-' + books[i].author + `<br><img src="${books[i].coverImg}" alt="${books[i].title}封面">`;
  }
}

HTML代码（无修改）

<div id='content'></div>

替代方案（无需新增字段） #

如果只是需要先区分不同图书的占位图，不需要提前配置真实封面地址，可以直接用图书标题动态生成不同的占位图，仅修改img标签部分即可：

book.innerHTML = books[i].title + '-' + books[i].author + `<br><img src="https://via.placeholder.com/150?text=${books[i].title}" alt="${books[i].title}封面">`;

这样每本图书的占位图会自带书名标识，自动区分。

内容的提问来源于stack exchange，提问作者souh