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(/image/u20P2.jpg)">
  <span>BM</span>
</i>

实际上，实际的首字母来自 Angular 表达式，例如:

  <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 事件发生时向图像添加一个类，然后使用该类来显示/隐藏带有 adjacent sibling combinator 的 span .

您还需要在您的 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>