How to fill in default avatar in javascript

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

If the 0eaf458574e21bd8f09de4d2e355bed6 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>">

Compared with other similar projects

1. First of all, Chinese The name support is better

2. Fill the data URI directly on the a1f02c36ba31691bcfe87b2722de723b tag, green without adding, the application cost is lower

3. Based on 486d7a50595533609bc98d44595dc670, without using 5ba626b379994d53f7acf72a64f9b697 rendering, the performance will be better

4. 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 'namedavatar/vue'
// register as directive
Vue.directive('avatar', directive);
// in vue template
<template>
<img v-avatar="&#39;Tom Hanks&#39;" width="36"/>
</template>

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

Related articles:

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!