How to fill in default avatar in javascript-JS Tutorial-php.cn

How to fill in default avatar in javascript

亚连

Release： 2018-06-05 15:34:33

Original

2441 people have browsed it

This article uses code examples to tell you how to fill in the default avatar with javascript and share the code. Friends who are interested in this can learn it.

In many of my projects, there are problems with default avatars. In order to maintain individuality and facilitate identification, avatars with names will be filled in for users who do not have avatars.

Code sharing: https://github.com/joaner/namedavatar

##Simple call

If If the uploaded avatar does not exist, the default avatar will be filled directly on the tag. The username is obtained from 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>

Copy after login

If the

resource is invalid, namedavatar .setImgs() will fill in the user name in alt, and src will become like this

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

Copy after login

Compared with other similar projects

First of all, Chinese The name support is better
Fill the data URI directly on the tag, green without adding, the application cost is lower
Based on
supports more configuration items, such as defining which part to display, or random background color

Also supports Vue.js's directive instruction method

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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Explain in detail the practical skills in Immutable and React

How to solve the error problem on VUEX compatible IE ( Detailed tutorial)

How to use readline in Node.js to read and write file content line by line

The above is the detailed content of How to fill in default avatar in javascript. For more information, please follow other related articles on the PHP Chinese website!