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

Comment remplir l'avatar par défaut en javascript

亚连
Libérer: 2018-06-05 15:34:33
original
2408 Les gens l'ont consulté

Cet article utilise des exemples de code pour vous expliquer comment remplir l'avatar par défaut avec javascript et partager le code. Les amis qui sont intéressés peuvent l'apprendre.

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

Appel simple

Si Si l'avatar téléchargé n'existe pas, l'avatar par défaut sera renseigné directement sur la balise . 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(&#39;namedavatar&#39;, function(namedavatar){
 namedavatar.config({
  nameType: &#39;lastName&#39;,
 })

 namedavatar.setImgs(document.querySelectorAll(&#39;img[alt]&#39;), &#39;alt&#39;)
})
</script>
Copier après la connexion

Si le 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

Par rapport à d'autres projets similaires

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

  2. Remplissez l'URI des données directement sur la balise , verte sans ajout, en bas coût de l'application

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

  4. prend en charge plus d'éléments de configuration , comme définir la partie à afficher, ou la couleur d'arrière-plan aléatoire

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

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

Ce qui précède est ce que j'ai compilé pour vous , j'espère que cela vous sera utile à l'avenir.

Articles associés :

Expliquez en détail les compétences pratiques dans Immutable et React

Comment résoudre le problème d'erreur sur IE compatible VUEX (Tutoriel détaillé)

Comment utiliser readline dans Node.js pour lire et écrire le contenu d'un fichier ligne par ligne

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