Sería mejor que la API que consumes te devolviera una propiedad booleana que indicara si la familia tiene imagen asignada o no pero aun así te dejo una solución en angular.
En tu component.ts
puedes hacer una llamada GET
que haga a una petición al fichero de imagen si este existe en el servidor pues te devolverá la imagen(seguramente en bytes) o un error. Y en función de eso puedes mostrar u ocultar el div
.
fileExists = false;
checkFileExistence(filename: string) {
// esto lo puedes añadir en un servicio
// También puedes usar los observables eso depende de como trabajes en tu proyecto
this.httpClient.get(`https://miserver.com/assets/${filename}.jpg`).toPromise()
.then(response => this.fileExists = true)
.catch(e => this.fileExists = false);
}
En component.html
puedes añadir un *ngIf
que en función del valor de fileExists
renderice o no el div.
<div [routerLink]="['/product/filtered']" [state]="{ id: famili.id}"
class="columna card-1 img-fluid img-thumbnail shadow-sm p-3 mb-5 bg-white rounded"
[ngStyle]="{'background': ' url(../../../assets/' + famili.name + '.jpg) no-repeat 0 0','background-size': '100% 100%'}"
*ngIf="fileExists"
>
<div class="card-body-1 h4">
{{famili.name | uppercase | translate }}
</div>
</div>