angular - 如何从 angular 4 中的 json 文件加载图像？

Question

我想在我的 Angular 4 项目中从我的 json 文件加载图像。我已经在我的 json 文件中声明了图像的路径。但是 html 模板不显示图像，而是直接显示图像的路径字符串。我将我的图像存储在我的 Angular 项目的 Assets 文件夹中

下面是html和json文件

<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

正如@stojevskimilan 所说，您可以将图像标签的 src 属性与包含图像地址的任何变量绑定(bind):

模板:

<img [src]="variableInComponent">