Help with displaying png on website Options

[Aendoran]

Hi there,

I have been working on a GitHub hosted page for my job, using this tutorial from Mapbox - https://docs.mapbox.com/help/tutorials/buil...-store-locator/ (I have very limited coding skills so this is way beyond my knowledge). On the left side of the store locator, there is a list of our stores that is clickable and directs the map to zoom in on the store location. I am trying to add emojis to each listing to easily describe what is available at a store (a quick visual indicator), but every time I try to add an image, the website fully breaks. My issue is that I can't just simply print out the emoji as the html code needs to variably print out three different emojis, based on what is available at each store. So each store has its own initialization and then the code later out just prints out the store properties.

I would love any and all help - thanks!


Here are some of the various codes that I wrote to try to get the emoji's to print:
1)

CODE

/*Creates the image using the image source*/
<div id="image">
        <img id="ConeEmoji" src="https://static.thenounproject.com/png/79716-200.png" width="5" height="5">
        </div>
.
.
.
/*Establishes the store properties that are later used to build the actual listing*/
const stores = {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': []
            },
            'properties': {
              'address': '',
              'productType': '',
              'storeName': '',
              'city': '',
              'postalCode': '',
              'state': '',
              'addresslink': '',
              'emoji' : 'ConeEmoji'
            }
          },
.
.
.
/*Creates the store listing*/
link.innerHTML = `${store.properties.emoji}`;

2)

CODE

const stores = {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': []
            },
            'properties': {
              'address': '',
              'productType': '',
              'storeName': '',
              'city': '',
              'postalCode': '',
              'state': '',
              'addresslink': '',
              'emoji' : 'https://static.thenounproject.com/png/79716-200.png'
            }
          },
.
.
.
/*Creates the store listing*/
link.innerHTML = `${store.properties.emoji}`;