JS實作預設頭像填充

這次帶給大家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>">

相比其它類似項目

1. 首先對中文姓名的支援更好

2. 直接在標籤上填充data URI，綠色無添加，應用成本更低

3. 基於

4. 支援的配置項目更多，例如可以定義顯示哪部分，或是隨機背景顏色

也支援Vue.js的directive 指令方式

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>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

原生js怎麼呼叫json

#JS仿經典傳奇遊戲

webpack-dev-server怎麼設定遠端模式

#webpack無法透過IP位址存取localhost怎麼辦？

#

以上是JS實作預設頭像填充的詳細內容。更多資訊請關注PHP中文網其他相關文章！