web-dev-qa-db-fra.com

Comment définir l'image de profil comme premières lettres du prénom et du nom de famille?

Fondamentalement, je travaille sur le système d'enregistrement des utilisateurs. que je fais front-end en utilisant ReactJS. pour les utilisateurs enregistrés, il existe une option pour ajouter des images pour leurs profils. lorsqu'il n'y a pas d'images pour les profils, l'image de profil doit contenir la première lettre du premier et du deuxième nom de l'image de profil comme google plus.

veuillez trouver l'exemple d'image ci-dessous.

enter image description here

Dans l'attente d'un moyen de le faire .. mieux s'il y a un plugin ou une bibliothèque intégré pour le faire.

javascriptjquerycsshtmlreactjs
11
sameera danthanarayana

Je suppose que vous avez accès au prénom et au nom de famille. En utilisant cela, j'ai écrit ce code qui prendra la première lettre du prénom et du nom et s'appliquera à votre image de profil.

$(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>
26
Kalpesh Singh

L'option css ajoutée dans JsFiddle

  • Vous venez de créer un div à l'intérieur div.
  • Mettez l'intérieur au centre complet avec line-height identique à la taille du conteneur et text-align: center.

Vous pouvez également faire définir le texte par Javascript si nécessaire.
[~ # ~] 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 optionnel 

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

Ma solution prend en charge les noms d'utilisateur avec des noms de plus de 2 mots. J'ai utilisé l'expression régulière pour extraire les premières lettres des composants de nom séparés par des espaces.

    var matches = str.match(/\b(\w)/g);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;

Appelez cette fonction contenant cela à partir de votre code HTML et "name_acronym" est l'ID du texte de l'image de profil.

3
zinngg

Moyen simple d'obtenir le premier caractère d'une chaîne. Et même parfois, vous pourriez obtenir $ comme indéfini lorsque vous utilisez

var firstName = $('#firstName').text();

essaye ça ...

var firstName = "Jhon";
var initial = firstName.charAt(0);
console.log('--------', initial);

par cela, vous devriez obtenir "J" en sortie

1
Sukshith S