這次帶給大家JS實作預設頭像填充，JS實作預設頭像填充的注意事項有哪些，以下就是實戰案例，一起來看一下。
在我的不少專案中，都有缺省頭像的問題。為了保持個性和方便辨認，會給沒有頭像的使用者填充帶有名字的頭像。
程式碼分享：https://github.com/joaner/namedavatar
呼叫簡單
如果上傳頭像不存在，直接會在 標籤上填入預設頭像，使用者名稱從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>如果
資源無效，namedavatar.setImgs()就會填入alt裡的用戶名，src變成這樣
<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>">
相比其它類似項目
首先對中文姓名的支援更好
直接在標籤上填充data URI，綠色無添加，應用成本更低
基於
支援的配置項目更多，例如可以定義顯示哪部分，或是隨機背景顏色
也支援Vue.js的directive 指令方式
import { directive } from 'namedavatar/vue'
// register as directive
Vue.directive('avatar', directive);
// in vue template
<template>
<img v-avatar="'Tom Hanks'" width="36"/>
</template>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#webpack無法透過IP位址存取localhost怎麼辦？
以上是JS實作預設頭像填充的詳細內容。更多資訊請關注PHP中文網其他相關文章！
