How can I load an image from my json file in angular 4?

Question

I want to load an image from my json file in my angular 4 project. I had declared the path of my images in my json file. But instead of showing the images, the html template shows the path string directly of the images. I stored my images in the assets folder in my angular project

Html and json file is below

<div class="row">
  <div class="col-md-12 set-menu-details">
    <collapsible-list [type]="'expandable'">
      <collapsible-list-item>
        <collapsible-header class="waves-effect">
          <div class="row">
            <div class="col-md-12">
              {{ menu.Name }}
            </div>
          </div>
        </collapsible-header>
        <collapsible-body [expanded]="true">
        <div class="row">
          <div class="col-md-12" *ngFor="let setMenuItems of menu.SetMenuItems" >
              <div class="col-md-7 set-menu-items">
                {{ setMenuItems.FoodItem.SetMenuImages }}
              </div>
            <div class="col-md-5">
            </div>
          </div>
        </div>
          <div class="row">
            <div class="col-md-12 set-menu-price">
             Price: {{ menu.Price }} BDT
            </div>
          </div>
        </collapsible-body>
      </collapsible-list-item>
    </collapsible-list>
  </div>
</div>

    {
      "Name": "Set Menu A",
      "Price": "199",
      "Id": "1",
      "SetMenuImage": "'assets/set-menu-a.jpg'",
      "SetMenuItems": [
        {
          "FoodItem":
          {
            "Id": "1",
            "Name": "Fried Rice",
            "Price": "99"
          },
          "FoodItemId": "1",
          "Id": "1",
          "Quantity": "1",
          "SetMenuId": "1"
        },
        {
          "FoodItem":
          {
            "Id": "3",
            "Name": "Chicken Fry",
            "Price": "80"
          },
          "FoodItemId": "3",
          "Id": "2",
          "Quantity": "1",
          "SetMenuId": "1"
        },
        {
          "FoodItem":
          {
            "Id": "2",
            "Name": "CocaCola",
            "Price": "30"
          },
          "FoodItemId": "2",
          "Id": "3",
          "Quantity": "2",
          "SetMenuId": "1"
        }

      ]
    }

Answer 1

As commented by @stojevskimilan , you can bind the src attribute of an image tag with any variable containing the address of the image :

Template :

<img [src]="variableInComponent">

Answer 2

In your solution there is no img tag, provide one.