Question

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

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

在你的解决方案中没有img标签，提供一个。

Answer 2

如@stojevskimilan所评论，您可以将图像标记的src属性与包含图像地址的任何变量绑定：

模板：

<img [src]="variableInComponent">

如何从角度4的json文件中加载图像？

2 个答案: