如何将个人资料图片设置为名字和姓氏的首字母？

Question

基本上，我正在研究用户注册系统。我正在使用 ReactJS 做前端。对于注册用户，可以选择为他们的个人资料添加图像。 当个人资料没有图片时，个人资料图片应包含个人资料图片的名字和第二个名字的第一个字母， 如 google plus 所做的那样。

请在下面找到示例图片。

期待一种方法来做到这一点..如果有内置的插件或库来做到这一点会更好。

原文由 sameera danthanarayana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我假设您可以访问名字和姓氏。使用它，我编写了这段代码，它将取名和姓氏的第一个字母并应用于您的个人资料图片。

 $(document).ready(function(){
  var firstName = $('#firstName').text();
  var lastName = $('#lastName').text();
  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
  var profileImage = $('#profileImage').text(intials);
});

 #profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="firstName">Kalpesh</span>
<span id="lastName">Singh</span>
<div id="profileImage"></div>

原文由 Kalpesh Singh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

JsFiddle 中添加的 css 选项

• 您只需在 --- 中创建一个 div div 。
• 将内部的放在完全中心 line-height 与容器的大小相同 text-align: center 。

如果需要，您还可以通过 Javascript 设置文本。

HTML

 <div id="container">
  <div id="name">
   </div>
</div>

CSS

 #container {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #333;
}
#name {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 36px;
  line-height: 100px;
}

可选的Javascript

   var name = "Adam";
  var lastname = "Sandler";
  var initials = name.charAt(0)+""+lastname.charAt(0);
  document.getElementById("name").innerHTML = initials;

原文由 Mike B 发布，翻译遵循 CC BY-SA 3.0 许可协议