title: How to show image in datatable Angular 4 from API
body: <p>I want show the image in datatable, the data is from API. I Already get the url image but the image was not found. Maybe i have wrong syntax or another in html.</p>
  
  <p><strong>This is my component.html</strong></p>
  
  <pre><code>&lt;table class="table table-striped" [mfData]="roomLayouts | dataNameFilter : filterQuery" #mf="mfDataTable"
          [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th style="width: 10%"&gt;
                &lt;mfDefaultSorter by="code"&gt;{{ 'Code' | translate }}&lt;/mfDefaultSorter&gt;
              &lt;/th&gt;
              &lt;th style="width: 10%"&gt;
                &lt;mfDefaultSorter by="name"&gt;{{ 'Name' | translate }}&lt;/mfDefaultSorter&gt;
              &lt;/th&gt;
              &lt;th style="width: 10%"&gt;
                &lt;mfDefaultSorter by="description"&gt;{{ 'FileName' | translate }}&lt;/mfDefaultSorter&gt;
              &lt;/th&gt;
              &lt;th style="width: 10%"&gt;
                &lt;mfDefaultSorter&gt;Image&lt;/mfDefaultSorter&gt;
              &lt;/th&gt;
              &lt;th style="width: 10%"&gt;
                {{ 'Action' | translate }}
              &lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let rLayout of mf.data"&gt;
              &lt;td&gt;{{rLayout.code}}&lt;/td&gt;
              &lt;td&gt;{{rLayout.name}}&lt;/td&gt;
              &lt;td&gt;{{rLayout.fileName}}&lt;/td&gt;
              &lt;td&gt;&lt;img [src]="rLayout.url" /&gt; &lt;/td&gt;
              &lt;td&gt;
                &lt;button type="button" class="btn btn-sm btn-warning "&gt;
                  &lt;i class="fa fa-edit"&gt;&lt;/i&gt;&amp;nbsp; {{ 'Edit' | translate }}&lt;/button&gt;
                &lt;button type="button" class="btn btn-sm btn-danger "&gt;
                  &lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&amp;nbsp; {{ 'Delete' | translate }}&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
  
          &lt;/tbody&gt;
          &lt;tfoot&gt;
            &lt;tr&gt;
              &lt;td colspan="5"&gt;
                &lt;mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"&gt;&lt;/mfBootstrapPaginator&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tfoot&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p><strong>This is the output JSON what i get :</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/u7XBl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u7XBl.png" alt="enter image description here"></a></p>
  
  <p>Anyone have a solutions?</p>