脚本宝典收集整理的这篇文章主要介绍了

javascript填充用户的默认头像,支持Vue.js

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>在我的不少项目中,都有缺省头像的问题。为了保持个性和方便辨认,会给没有头像的用户填充带名字的头像。</p> <p>github项目: <a href="https://github.com/joaner/namedavatar" rel="nofollow noreferrer" target="_blank">https://github.com/joaner/nam...</a></p> <p><span class="img-wrap"><img data-src="/img/bV3TiU?w=766&amp;h=114" src="/img/bV3TiU?w=766&amp;h=114" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <h3 id="articleHeader0">调用简单</h3> <p>如果上传头像不存在,直接会在 <code>&lt;img&gt;</code> 标签上填充默认头像,用户名从<code>alt</code>获取:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<img alt=&quot;李连杰&quot; width=&quot;32&quot; style=&quot;border-radius: 100%&quot;><br /> <img src=&quot;./invalid.jpg&quot; alt=&quot;Tom Hanks&quot; width=&quot;40&quot;></p> <p><script> requirejs('namedavatar', function(namedavatar){ &nbsp;&nbsp;namedavatar.config({ nameType: 'lastName', })</p> <p> namedavatar.setImgs(document.querySelectorAll('img[alt]'), 'alt') }) </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"李连杰"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"32"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"border-radius: 100%"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./invalid.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Tom Hanks"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"40"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> requirejs(<span class="hljs-string">'namedavatar'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">namedavatar</span>)</span>{ &nbsp;&nbsp;namedavatar.config({ <span class="hljs-attr">nameType</span>: <span class="hljs-string">'lastName'</span>, }) namedavatar.setImgs(<span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'img[alt]'</span>), <span class="hljs-string">'alt'</span>) }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>如果<code>&lt;img src="./invalid.jpg"&gt;</code>资源无效,<code>namedavatar.setImgs()</code>就会填充<code>alt</code>里的用户名,<code>src</code>变成这样</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<img id=&quot;avatar1&quot; src=&quot;data:image/svg+xml,&amp;lt;svg data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>&lt;img <span class="hljs-keyword">id</span>=<span class="hljs-string">"avatar1"</span> src=<span class="hljs-string">"data:image/svg+xml,&amp;lt;svg >相比其它类似项目</h3> <ul> <li>首先对中文姓名的支持更好</li> <li>直接在&lt;img&gt;标签上填充data URI,绿色无添加,应用成本更低</li> <li>基于&lt;svg&gt;,没有用&lt;canvas&gt;渲染,性能也会好一点</li> <li>支持的配置项更多,比如可以定义显示哪部分,或是随机背景颜色</li> </ul> <h3 id="articleHeader2">也支持<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js的 directive 指令方式</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { directive } from 'namedavatar/vue' // register as directive Vue.directive('avatar', directive); // in vue template <template> <img v-avatar=&quot;'Tom Hanks'&quot; width=&quot;36&quot;/> </template> " title="" data-original-title="复制"></span> </div> </div><pre class="hljs javascript"><code><span class="hljs-keyword">import</span> { directive } <span class="hljs-keyword">from</span> <span class="hljs-string">'namedavatar/vue'</span> <span class="hljs-comment">// register as directive</span> Vue.directive(<span class="hljs-string">'avatar'</span>, directive); <span class="hljs-comment">// in vue template</span> &lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">v-avatar</span>=<span class="hljs-string">"'Tom Hanks'"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"36"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span> </code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

javascript填充用户的默认头像,支持Vue.js

全部内容,希望文章能够帮你解决

javascript填充用户的默认头像,支持Vue.js

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过