Imagem dentro do dx-popover

Front-end
#1

No HTML normal esta lógica funciona

<div *ngIf="imagemProduto !== 'NAO' && imagemDerivacao === 'NAO'">
  <img
    *ngIf="imagemProduto !== 'NAO' && imagemDerivacao === 'NAO'"
    mat-card-image
    class="icon-size-24 imagem-circulo"
    [src]="imagemProduto"
    style="cursor: pointer"
  />
</div>

<div *ngIf="imagemDerivacao !== 'NAO'">
  <img
    *ngIf="imagemDerivacao !== 'NAO'"
    mat-card-image
    class="icon-size-24 imagem-circulo"
    [src]="imagemDerivacao"
    style="cursor: pointer"
  />
</div>

Dentro deste component não.

<dx-popover
  *ngIf="escolheuDerivacao"
  showEvent="click"
  target="#derivacao"
  [width]="400"
  [showTitle]="true"
  title="Derivação - Código: {{ produtoServicoTela?.codigo }}">
  
  <div *ngIf="imagemProduto !== 'NAO' && imagemDerivacao === 'NAO'">
    <img
      *ngIf="imagemProduto !== 'NAO' && imagemDerivacao === 'NAO'"
      mat-card-image
      class="icon-size-24 imagem-circulo"
      [src]="imagemProduto"
      style="cursor: pointer"
    />
  </div>
  
  <div *ngIf="imagemDerivacao !== 'NAO'">
    <img
      *ngIf="imagemDerivacao !== 'NAO'"
      mat-card-image
      class="icon-size-24 imagem-circulo"
      [src]="imagemDerivacao"
      style="cursor: pointer"
    />
  </div>
</dx-popover>

O que pode ser ?

#2

Tente não repetir o *ngIf nas tags div e img, e faça um teste sem o atributo mat-card-image.