title: HTML image text is being displayed instead of the image
body: <p>I currently have some code which takes an array of javascript objects and generates an html list based on it, I want to display the corresponding image with the text in the list. But currently I can only get it to display the address if the image of text. Any help would be appreciated thanks!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt;
    &lt;p&gt;Please insert the items&lt;/p&gt;
    &lt;input type="text" id="box" /&gt;
  &lt;/form&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul {
      border: 2px solid grey;
      border-radius: 5px;
      padding: 1em;
    }
    li {
      display: inline-block;
      padding: 0.5em;
    }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>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&amp;canvas=753%2C502&amp;fit=bounds&amp;height=502&amp;quality=75&amp;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) =&gt; catalog[key].keywords.includes(searchTerm.toLowerCase()))
      .map((key) =&gt; catalog[key]);
  }
  
  function render(results) {
    const root = document.querySelector("#root");
    const list = results.map(itemToLi).join("");
  
    root.innerHTML = `&lt;ul&gt;
      ${list}
    &lt;/ul&gt;`;
  }
  
  function itemToLi(item) {
    return `&lt;li&gt;${item.name}&lt;/li&gt;$ ${item.price}&lt;li&gt; &lt;li&gt;${item.image}&lt;li&gt;`;
  }
  </code></pre>