Javascript 显示的是HTML图像文本，而不是图像

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

HTML

JS

---

您仅获取URI文本，因为这是您要输出的内容：

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

下面是一个小演示，其中包含您的目录内容：

常量目录={ 丙氧基片：{ 名称：加氧片， 关键词：加氧片， 关键词：[银河、平板电脑、三星]， 价格：800， 图片：https://www.jbhifi.co.nz/FileLibrary/ProductResources/Images/150044-M-HI.jpg }, GalaxyPhone：{ 姓名：GalaxyPhone， 键：galaxyphone， 关键词：[银河，手机，三星]， 价格：1000， 图片：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：{ 姓名：HTCPhone， 键：htcphone， 关键词：[htc，电话]， 价格：650， 图片：https://cdn.mos.cms.futurecdn.net/ca063713e185be46e62ec2eb3762a540.jpg } }; const root=document.querySelectorroot； 常量列表=Object.valuescatalog.mapitemToLi.join； root.innerHTML=` ${list} `; 函数项ToLiItem{ 返回`${item.name}$${item.price}`； } 您需要使用标记来渲染图像。另外，不要忘记在其中使用alt属性。 您可以将现有JavaScript方法itemToLi更新为：

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

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>`;
}

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

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

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