javascript填充默认的头像方法

在我的很多项目中，都有默认头像的问题。为了保持个性，便于识别，没有头像的用户会用有名字的头像填充。

代码共享：https://github.com/joaner/namedavatar

呼叫简单

如果上传的头像不存在，默认头像将直接填写在img标签中，用户名将从alt:

img alt=' Jet Li ' width=' 32 ' style=' border-radius : 100% ' img src=' http :/invalid . jpg ' Alt=' tomhanks ' width=' 40 ' script rightjs('命名头像'、function(namedavatar){ namedavatar . config({ nametype : ' last name '，})namedavatar . setimgs(document . queryselectorall(' img[Alt]')、Alt ')})/script If img src=' http 3360。/invalid.jpg '资源无效，namedavatar.setImgs()将在alt中填写用户名，src将变成这样

img id=' avatar 1 ' src=' http : data : image/SVG XML，SVG xmlns=' http://www . w3 . org/2000/SVG ' width=' 32 ' height=' 32 ' rect fill=' # 9c 27 B0 ' x=' 0 ' y=' 0 ' width=' 100% ' height=' 100% '/rect text fill=' #与其他类似项目相比，fff' x='

首先，对中文名字的支持更好。数据URI直接填充在img标签中。不添加绿色，应用成本更低。基于svg，不用画布渲染，性能会更好。支持更多的配置项，比如可以定义哪些部分，或者随机背景色也支持Vue.js的指令指令模式

从“namedavatar/vue”//中导入{ directive }注册为directiveVue.directive('avatar '，directive)；//invue template template img v-avatar=' ' Tom hanks ' ' width=' 36 '/template。以上就是本次整理的全部内容。谢谢你的支持。