HTML 正在显示图像文本而不是图像

Question

我目前有一些代码采用 javascript 对象数组并基于它生成 html 列表，我想在列表中显示相应的图像和文本。 但目前我只能让它显示文本图像的地址。 任何帮助将不胜感激谢谢！

HTML

<form>
  <p>Please insert the items</p>
  <input type="text" id="box" />
</form>

<div id="root"></div>

CSS

ul {
    border: 2px solid grey;
    border-radius: 5px;
    padding: 1em;
  }
  li {
    display: inline-block;
    padding: 0.5em;
  }

JS

const catalog = {

  GalaxyTablet: {
    name: "GalaxyTablet",
    key: "galaxytablet",
    keywords: ["galaxy", "tablet", "samsung"],
    price: 800,
    image: "https://www.jbhifi.co.nz/FileLibrary/ProductResources/Images/150044-M-HI.jpg"
  },
  GalaxyPhone: {
    name: "GalaxyPhone",
    key: "galaxyphone",
    keywords: ["galaxy", "phone", "samsung"],
    price: 1000,
    image: "https://assets.kogan.com/files/product/etail/Samsung-/S10WHT_03.jpg?auto=webp&canvas=753%2C502&fit=bounds&height=502&quality=75&width=753"
  },
  HTCPhone: {
    name: "HTCPhone",
    key: "htcphone",
    keywords: ["htc", "phone"],
    price: 650,
    image: "https://cdn.mos.cms.futurecdn.net/ca063713e185be46e62ec2eb3762a540.jpg"
},

};

const form = document.querySelector("form");

form.addEventListener("submit", submitHandler);

function submitHandler(event) {
  event.preventDefault();

  const searchTerm = form.box.value;
  const results = search(searchTerm);

  render(results);
}

function search(searchTerm) {
  return Object.keys(catalog)
    .filter((key) => catalog[key].keywords.includes(searchTerm.toLowerCase()))
    .map((key) => catalog[key]);
}

function render(results) {
  const root = document.querySelector("#root");
  const list = results.map(itemToLi).join("");

  root.innerHTML = `<ul>
    ${list}
  </ul>`;
}

function itemToLi(item) {
  return `<li>${item.name}</li>$ ${item.price}<li> <li>${item.image}<li>`;
}

Answer 1

您只得到 URI 文本，因为这是您输出的内容：

<li>${item.image}<li>

您需要创建一个img标签：

<li><img src="${item.image}"></li>

这是一个包含目录内容的小演示：

 const catalog = { GalaxyTablet: { name: "GalaxyTablet", key: "galaxytablet", keywords: ["galaxy", "tablet", "samsung"], price: 800, image: "https://www.jbhifi.co.nz/FileLibrary/ProductResources/Images/150044-M-HI.jpg" }, GalaxyPhone: { name: "GalaxyPhone", key: "galaxyphone", keywords: ["galaxy", "phone", "samsung"], price: 1000, image: "https://assets.kogan.com/files/product/etail/Samsung-/S10WHT_03.jpg?auto=webp&canvas=753%2C502&fit=bounds&height=502&quality=75&width=753" }, HTCPhone: { name: "HTCPhone", key: "htcphone", keywords: ["htc", "phone"], price: 650, image: "https://cdn.mos.cms.futurecdn.net/ca063713e185be46e62ec2eb3762a540.jpg" } }; const root = document.querySelector("#root"); const list = Object.values(catalog).map(itemToLi).join(""); root.innerHTML = `<ul> ${list} </ul>`; function itemToLi(item) { return `<li>${item.name}</li>$ <li>${item.price}</li> <li><img src="${item.image}"></li>`; }

 <div id="root"></div>

Answer 2

您需要使用img标签来渲染图像。 也不要忘记在其中使用alt属性。 您可以将现有的 JavaScript 方法itemToLi更新为：

function itemToLi(item) {
  return `<li>${item.name}</li>$ <li>${item.price}</li> <li><img src="${item.image}" alt=">${item.name}"></li>`;
}