I'm working on a project where image url is stored in a child table(image) and the image is in a folder. I can display all images from image table.
<ng-container matColumnDef="location">
<th mat-header-cell *matHeaderCellDef>IMAGE</th>
<td mat-cell *matCellDef="let productImage">
<img
height="100"
width="100"
src="{{ productImage?.location }}"
class="rounded-circle img-fluid img-thumbnail"
alt=""
/>
</td>
But when I try the following, the images are not displayed while other data is accessible through parent–child relationship. this
product.image.name
works okay.
<ng-container matColumnDef="location">
<th mat-header-cell *matHeaderCellDef>Image</th>
<td mat-cell *matCellDef="let product">
<img
height="100"
width="100"
src="{{ product.image.location }}"
alt="{{ product.image.name }}"
class="rounded-circle img-fluid img-thumbnail"
alt=""
/>
</td>
</ng-container>