vue图标的设置和动态修改图标的方法

最近在写公司项目时动态更新收藏夹图标

动态更新前需要默认的favicon。

目前，由vue-cli构建的vue项目已经有了一个静态文件夹来存储静态文件。

Favicon图片放在这个文件夹下。

然后添加到index.html:

Link rel=角质层' type=' image/x-icon ' href=' static/fav icon . ico ' rel=' external nofollow '然后刷新浏览器，它就会被更新。

如果它不起作用，请检查您的构建文件夹：build/webpack.dev.conf.js(在此步骤之前，我的出现并正常显示。如果没有，请配置它。)

new html webpackplugin({ filename : ' index . html '，template3360' index.html '，inject: true，favicon3360 './statistic/favicon . ico ' })，此时页面的fav icon可以正常显示。

但是，如何从服务器动态获取图片，这样就可以像上传文件一样随意更改favicon了。我们先来看看stackoverflow上的答案

(function(){ var link=document . queryselector(' link[rel *=' icon ']')| | document . createelement(' link ')；link . type=' image/x-icon '；link.rel=“快捷方式图标”；link . href=' http://www . stack overflow.com/fav icon . ico '；document . getelementsbytagname(' head ')[0]。appendChild(链接)；})();动态创建链接标签，然后添加元素。我现在写的项目是从前端上传到服务器的图片。关于如何上传图片，呃，粘贴代码。

logoFirstChange(val) {让那个=这个；让Fr=new FileReaderlet file=val . target . files[0]；//获取需要替换的img的id。我这里换了很多图，方法都是一样的，所以写的方法也是一样的。let img=document . getelementbyid(val . srcelement . name . split(' | ')[0])；Fr.readAsDataURL(文件)；fr . onloadend=function(){ img . src=this . result；};让FD=new FormData()；//add('参数名'，'参数值')，参数名需要对应后端的fd.append('InputFile '，file)；fd.append('logo_id '，val . srcelement . name . split(' | ')[1])；//在//vue项目中，为了方便更改axios原型链，实际上是在发送一个axios请求。这里，正常的axios就可以了，感谢Blob类型也没用。我试图测试这种类型。那个。axios . post(that . prefix '/yr _ logo/logo _ update/'，fd，new Blob([fd]，{ type : ' multipart/form-data ' })。然后(function(RES){ if(RES . data . status==1){ util . notification(' success '，' success '，RES . data . success _ msg)；} else {util.notification('error '，' failure '，RES . data . error _ msg)；} img.value=}) .catch(function(err)){ console . log(err)；});//上传后修改了axios的原型链，因为全局其他页面都需要。(此处忽略)that . axios . defaults . headers . post[' content-type ']=' application/x-www-form-URL encoded '；那个。axios . defaults . transformrequest=function(data){ let ret=' '；for(让它进入数据){ ret=encodeURIComponent(it)'=' encodeURIComponent(data[it])' ' }返回ret.slice(0，ret . length-1)；}}我们先来做这个。语言组织能力不好。想到了再补充。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。