Topic: Displaying an Image in MdbTable?
Hi!
Of course it is! Below is an example:
TS
elements: any = [
{
id: 1,
image:
'https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg',
first: 'Mark',
},
{
id: 2,
first: 'Jacob',
image:
'https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-5.jpg',
},
{
id: 3,
first: 'Larry',
image:
'https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg',
},
];
headElements = ['ID', 'First', 'Image'];
HTML
<div class="container">
<table mdbTable>
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{ el.id }}</th>
<td>{{ el.first }}</td>
<td class="w-25">
<img [src]="el.image" class="img-fluid img-thumbnail" alt="Sheep" />
</td>
</tr>
</tbody>
</table>
</div>
Hope it helps!
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.4.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Tags
Related topics