Maison > interface Web > js tutoriel > le corps du texte

JS implémente le remplissage d'avatar par défaut

php中世界最好的语言
Libérer: 2018-03-17 15:22:44
original
2245 Les gens l'ont consulté

Cette fois, je vais vous proposer JS pour implémenter le remplissage d'avatar par défaut. Quelles sont les précautions pour que JS implémente le remplissage d'avatar par défaut. Ce qui suit est un cas pratique, jetons un coup d'œil.

Dans beaucoup de mes projets, il y a un problème avec les avatars par défaut. Afin de conserver l'individualité et de faciliter l'identification, des avatars avec des noms seront renseignés pour les utilisateurs qui n'ont pas d'avatar.

Partage de code : https://github.com/joaner/namedavatar

Facile à appeler

Si l'avatar téléchargé n'existe pas, l'avatar par défaut sera renseigné directement sur la balise , et le nom d'utilisateur est obtenu à partir de alt :

<img alt="李连杰" width="32" style="border-radius: 100%">
<img src="./invalid.jpg" alt="Tom Hanks" width="40">
<script>
requirejs('namedavatar', function(namedavatar){
 namedavatar.config({
  nameType: 'lastName',
 })
 namedavatar.setImgs(document.querySelectorAll('img[alt]'), 'alt')
})
</script>
Copier après la connexion

Si La ressource n'est pas valide, nomméeavatar.setImgs() remplira le nom d'utilisateur en alt, et src devient comme ceci

<img id="avatar1" src="data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect fill="#9C27B0" x="0" y="0" width="100%" height="100%"></rect><text fill="#FFF" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">Hanks</text></svg>">
Copier après la connexion

Comparé à d'autres similaires projets

  1. Tout d'abord, il prend mieux en charge les noms chinois

  2. Remplissez l'URI des données directement sur le tag, vert sans ajout, coût d'application inférieur

  3. Basé sur , sans utiliser , les performances seront meilleures

  4. prend en charge plus d'éléments de configuration, par exemple, vous pouvez définir quelle partie afficher, ou une couleur d'arrière-plan aléatoire

prend également en charge la méthode de commande directive de Vue.js

import { directive } from 'namedavatar/vue'
// register as directive
Vue.directive('avatar', directive);
// in vue template
<template>
<img v-avatar="&#39;Tom Hanks&#39;" width="36"/>
</template>
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment appeler json avec du js natif

JS imitation jeu légendaire classique

Comment définir le mode distant pour webpack-dev-server

Que dois-je faire si webpack ne peut pas accéder à localhost via l'adresse IP ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal