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

Home

Web Front-end

JS Tutorial

How to fill in default avatar in javascript

Jun 05, 2018 pm 03:34 PM

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 <img> tag. The username is obtained from alt:

&lt;img alt=&quot;李连杰&quot; width=&quot;32&quot; style=&quot;border-radius: 100%&quot;&gt;
&lt;img src=&quot;./invalid.jpg&quot; alt=&quot;Tom Hanks&quot; width=&quot;40&quot;&gt;

&lt;script&gt;
requirejs(&#39;namedavatar&#39;, function(namedavatar){
 namedavatar.config({
  nameType: &#39;lastName&#39;,
 })

 namedavatar.setImgs(document.querySelectorAll(&#39;img[alt]&#39;), &#39;alt&#39;)
})
&lt;/script&gt;

Copy after login

If the <img src="./invalid.jpg"> resource is invalid, namedavatar .setImgs() will fill in the user name in alt, and src will become like this

&lt;img id=&quot;avatar1&quot; src=&quot;data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot;&gt;&lt;rect fill=&quot;#9C27B0&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;/rect&gt;&lt;text fill=&quot;#FFF&quot; x=&quot;50%&quot; y=&quot;50%&quot; text-anchor=&quot;middle&quot; alignment-baseline=&quot;central&quot; font-size=&quot;16&quot; font-family=&quot;Verdana, Geneva, sans-serif&quot;&gt;Hanks&lt;/text&gt;&lt;/svg&gt;&quot;&gt;

Copy after login

Compared with other similar projects

First of all, Chinese The name support is better
Fill the data URI directly on the <img> tag, green without adding, the application cost is lower
Based on <svg>, without using <canvas> rendering, the performance will be better
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
&lt;template&gt;
&lt;img v-avatar=&quot;&#39;Tom Hanks&#39;&quot; width=&quot;36&quot;/&gt;
&lt;/template&gt;

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!

Statement of this Website

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