<div style="display: flex; flex-direction: column;">
    <div class="img-bann-grl" style="background-image: url('{{typeBann}}');">
        <div class="height-50">
        </div>
        <div class="title-content">
            <span class="img-title">{{typeLine}}</span>
            <span class="red-label">
                @if (product == null) {
                --
                }@else {
                {{ product.MODELO }}
                }
            </span>
        </div>
    </div>
    <div class="one-container">
        @if (isLoading) {
        <mat-spinner></mat-spinner>
        }
        @if (!isLoading && hasError) {
        <p style="font-weight: 500; text-align: center; font-style: italic;">{{ errorStr }}</p>
        }
        @if (!isLoading && !hasError) {
        <div class="card">
            <div class="card-img">
                <img [src]="product!.img" alt="" style="width: 369px;height: 354px;">
            </div>
            <div class="card-text">
                <div style="margin-top: 30px;">
                    <span class="card-title" style="vertical-align: middle;">{{ product!.SUBMODELO }}</span> &nbsp; <img
                        [src]="'assets/img/lines.png'" alt="" style="height: 30px; vertical-align: middle;">
                </div>
                <span class="card-info">
                    {{ product!.DESCRIPCION }}
                    <div class="buttons">
                        <span style="vertical-align: middle;" style="color: #252E68;">
                            <a [href]="href" target="_blank">Ver catálogo</a>&nbsp; <mat-icon
                                style="transform: scale(1.3);" svgIcon="catalogo"></mat-icon>
                        </span>
                        <span style="vertical-align: middle;">
                            <a routerLink="/cotizacion" style="color: #EC1E24;">Solicitar información</a>&nbsp;
                            <mat-icon style="transform: scale(1.1); color: #EC1E24;" svgIcon="info"></mat-icon>
                        </span>
                    </div>
                </span>
            </div>
        </div>
        }
    </div>
</div>
<!--

quiero que en la imagen de card-img se muestre la imagen, esta cuando subo el proyecto al servidor está en ../ALP/AB.jpg, pero cuando estoy en desarrollo está en assets/img/ATC.png, cómo puedo hacer para que se muestre la imagen en ambos casos? quiero validar si existe el archivo
--> 
