CSS-стилизация - как отобразить инициалы человека или его изображение

Question

Используя этот прекрасный HTML и CSS в качестве руководства, я могу отображать свои инициалы на своей фотографии.

Это здорово, однако я хотел бы отображать только инициалы в том случае, если изображениене существует;если изображение существует, инициалы peron не должны отображаться.

Другими словами, изображение должно перекрывать инициалы, когда это изображение существует (чтобы НЕ видеть инициалы).

.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>

На самом деле фактические инициалы приходят из углового выражения, такого как:

  <span>{{ dataItem.personInitials }}</span>

Я получил подсказку: использованиеfigure, но я еще не совсем там - то есть

<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

вы можете добавить класс к изображению, когда происходит событие onerror, а затем использовать этот класс, чтобы показать / скрыть span с помощью соседнего братского комбинатора .

YouТакже потребуется добавить пару строк в файл CSS, чтобы он по умолчанию скрывал span и отображал, когда изображение содержит этот класс

.

.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

Лично я бы сделал что-то вроде этого.

Обратите внимание, что при наличии действительного изображения оно отображается.Если ссылка неактивная, отображается цвет фона и текста.Также отображает текст во время загрузки изображения (приятное прикосновение для медленных соединений).

Хороших выходных!

.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 3

Если вы используете угловой, вы можете сделать одну простую if проверку

<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
  <span *ngIf="!dataItem.imageSrc">{{dataItem.personInitials}}</span>
</i>

Демонстрация в действии здесь - https://stackblitz.com/edit/angular-r3q4i6

Answer 4

Если вы используете свойство z-index в css, вы можете установить <span> за фоновым изображением.Вы можете узнать больше о z-index здесь .(Вам также придется удалить цвет фона, чтобы эта работа работала.)

.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>