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>

实际上，实际的缩写来自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

如果您使用的是角度，则可以进行一次简单的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 2

您可以在onerror事件发生时向图像添加一个类，然后使用该类来显示/隐藏带有adjacent sibling combinator的span。

您还需要在css fil中添加几行，以便默认情况下隐藏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 3

如果在CSS中使用z-index属性，则可以在背景图片后面设置<span>。您可以了解有关z-index here的更多信息。（您还必须删除背景色以使其正常工作。）

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

Answer 4

我个人会做这样的事情。

请注意，如果有有效的图像，则会显示。如果链接为空链接，则将显示背景颜色和文本。在加载图像时，还会显示文本（点触可降低连接速度）。

周末愉快！

^7.0.0-rc.0

.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%;
}

CSS样式-如何显示一个人的姓名缩写或一个人的图像

4 个答案: