Home  >  Article  >  Web Front-end  >  JS implements default avatar filling

JS implements default avatar filling

php中世界最好的语言
php中世界最好的语言Original
2018-03-17 15:22:442231browse

This time I will bring you JS to implement default avatar filling. What are the precautions for JS to implement default avatar filling? The following is a practical case, let's take a look.

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 the uploaded avatar does not exist, the default avatar will be filled directly on the tag, and 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('namedavatar', function(namedavatar){
 namedavatar.config({
  nameType: 'lastName',
 })
 namedavatar.setImgs(document.querySelectorAll('img[alt]'), 'alt')
})
</script>
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>">

Compared with other similar projects

  1. First of all, it has better support for Chinese names

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

  3. Based on , without using for rendering, the performance will be better

  4. Supports more configuration items, for example, you can define which part to display, Or a random background color

Also supports Vue.js's directive command 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>
I believe you have mastered the method after reading the case in this article, please pay attention to php for more excitement Other related articles on the Chinese website!

Recommended reading:

How to call json with native js

JS imitation classic legendary game

How to set remote mode for webpack-dev-server

What should I do if webpack cannot access localhost through the IP address?

The above is the detailed content of JS implements default avatar filling. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn