CSS styling - how to display a person's initials or a person's image - css

Question

Using this lovely html and css as a guide, I'm able to display my initials over my photo.
This is great, however, I would like to display only the initials in the event the image does not exist; if the image exist, no peron initials should be rendered.
In other words, the image should overlay the initials when that image exists (so as NOT to see the initials).
.profile-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
background-color: lightgray;
border-radius: 50%;
border: gray 2px solid;
background-size: cover;
background-position: center;
background-repeat: none;
}
.profile-dot span {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
<span>BM</span>
</i>
In reality, the actual initials are coming from an Angular expression such as:
<span>{{ dataItem.personInitials }}</span>
I got a hint re: the use of figure, but I'm not quite there yet - i.e.
<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}" >
<figcaption>
<span>{{ dataItem.patientInitials }}</span>
</figcaption>
</i>
</figure>

Answer 1

you can add a class to the image when the onerror event happens and then use that class to show/hide the span with the adjacent sibling combinator.
You will also need to add a couple of lines to your css fil so that it hides the span by default and it makes it visible when the image contains that class
.profile-dot img+span {
display: none;/*Hide it by default*/
}
.profile-dot img.broken-link+span {
display: block; /* only show when img has class broken-link*/
}
<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='broken-link' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}" >
<span>{{ dataItem.patientInitials }}</span>
</i>
</figure>

Answer 2

If you are using angular, you can one simple if check
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
<span *ngIf="!dataItem.imageSrc">{{dataItem.personInitials}}</span>
</i>
Demo in action is here - https://stackblitz.com/edit/angular-r3q4i6

Answer 3

Personally I'd do something like this.
Notice if there is a valid image, it displays. If the link is a dud, then the background color and text would display. Also displays the text while image is loading (nice touch for slower connections).
Have a great weekend!
.profile-dot {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
background-color: lightgray;
border-radius: 50%;
border: gray 2px solid;
overflow: hidden;
}
.profile-dot figure {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: none;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.profile-dot figcaption {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<div class="profile-dot">
<figure style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)"></figure>
<figcaption>BM</figcaption>
</div>
<br/><br/>
<div class="profile-dot">
<figure style="background-image: url(BROKEN-LINK)"></figure>
<figcaption>BM</figcaption>
</div>

Answer 4

If you use the z-index property in css, you can set the <span> behind the background image. You can learn more about z-index here. (You will also have to remove the background color in order to make this work.)
.profile-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border-radius: 50%;
border: gray 2px solid;
background-size: cover;
background-position: center;
background-repeat: none;
}
.profile-dot span {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg);">
<span style="z-index:-1;">BM</span>
</i>