您好,登錄后才能下訂單哦!
這篇文章主要介紹javascript如何填充默認(rèn)頭像,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
調(diào)用簡單
如果上傳頭像不存在,直接會在 <img> 標(biāo)簽上填充默認(rèn)頭像,用戶名從alt獲?。?/p>
<img alt="李連杰" width="32" > <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>
如果<img src="./invalid.jpg">資源無效,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>">
相比其它類似項目
首先對中文姓名的支持更好
直接在<img>標(biāo)簽上填充data URI,綠色無添加,應(yīng)用成本更低
基于<svg>,沒有用<canvas>渲染,性能也會好一點
支持的配置項更多,比如可以定義顯示哪部分,或是隨機(jī)背景顏色
也支持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>
以上是“javascript如何填充默認(rèn)頭像”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。