how can I display images using a path stored in a child table- Angular and Spring boot

Question

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>

Answer 1

To have the images displayed I added image.setLocation(entity.getImage().getLocation()); in my product dto converter.