如何通过API在数据表Angular 4中显示图像

Question

我想在数据表中显示图像，数据来自API。我已经获取了网址图片，但未找到图片。也许我的HTML语法错误或其他错误。

这是我的component.html

<table class="table table-striped" [mfData]="roomLayouts | dataNameFilter : filterQuery" #mf="mfDataTable"
        [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
        <thead>
          <tr>
            <th style="width: 10%">
              <mfDefaultSorter by="code">{{ 'Code' | translate }}</mfDefaultSorter>
            </th>
            <th style="width: 10%">
              <mfDefaultSorter by="name">{{ 'Name' | translate }}</mfDefaultSorter>
            </th>
            <th style="width: 10%">
              <mfDefaultSorter by="description">{{ 'FileName' | translate }}</mfDefaultSorter>
            </th>
            <th style="width: 10%">
              <mfDefaultSorter>Image</mfDefaultSorter>
            </th>
            <th style="width: 10%">
              {{ 'Action' | translate }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let rLayout of mf.data">
            <td>{{rLayout.code}}</td>
            <td>{{rLayout.name}}</td>
            <td>{{rLayout.fileName}}</td>
            <td><img [src]="rLayout.url" /> </td>
            <td>
              <button type="button" class="btn btn-sm btn-warning ">
                <i class="fa fa-edit"></i>&nbsp; {{ 'Edit' | translate }}</button>
              <button type="button" class="btn btn-sm btn-danger ">
                <i class="fa fa-trash-o"></i>&nbsp; {{ 'Delete' | translate }}</button>
            </td>
          </tr>

        </tbody>
        <tfoot>
          <tr>
            <td colspan="5">
              <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
            </td>
          </tr>
        </tfoot>
      </table>

这是我得到的输出JSON：

有人有解决方案吗？