最近写公司项目时,动态更新图标
动态更新之前需要有一个默认的图标。
目前vue-cli搭建的vue项目里面已经有了一个静态的文件夹,存放静态文件。
标识图片放到该文件夹下。
然后再index . html中添加:
& lt;链接rel="快捷方式图标" type="图像/x图标" href=" https://www.yisu.com/zixun/static/favicon.ico " rel=巴獠縩ofollow”在
然后刷新浏览器,就会更新。
如果没有效果,则查看你的构建文件夹下:构建/webpack.dev.conf.js中。(到这个步骤之前我的是出现了,并且正常显示,如果不显示,则配置一下吧。)
新HtmlWebpackPlugin ({
文件名:“index . html”,
模板:“index . html”,
注射:没错,
标识:“. ./stastic ico的位于
}),
到这个时候,页面的图标已经可以正常显示了。
然而,如何从服务器动态获取图片呢,这样以来就可以像上传文件一样,随意更换图标。先看一下stackoverflow上的回答
(函数(){
var=document.querySelector链接(链接(rel *=巴急辍?”)| | document.createElement(“链接”);
链接。类型=巴枷?x图标”;
链接。rel=翱旖莘绞酵急辍?
链接。href=' http://www.stackoverflow.com/favicon.ico ';
document.getElementsByTagName(头)[0].appendChild(链接);
})();
动态创建链接标签,然后添加元素。我目前写的项目是从前端上传到服务器的图片,关于如何上传图片,额,粘贴一下代码吧。
logoFirstChange (val) {
让=这个;
让Fr=new FileReader;
让文件=val.target.files [0];//获取需要更换的img的id,我这里更换的图片比较多,并且方法都一样,所以写同样的方法里面了。
让img=. getelementbyid (val.srcElement.name.split (“|”) [0]);
Fr.readAsDataURL(文件);
Fr.onloadend=function () {
img。src=https://www.yisu.com/zixun/this.result;
};
让fd=new FormData ();//加数(“参数名”,“参数值”),参数名需要和后端对应
fd。追加(InputFile,文件);
fd。追加(logo_id, val.srcElement.name.split (“|”) [1]);//vue项目中为了方便更改一下axios原型链,其实就是发送一个axios请求。这里正常的axios就行,不用谢Blob类型,没什么用,我当时是为了测试一下这个类型。
that.Axios.post (。前缀+/yr_logo/logo_update/, fd,新团((fd),{类型:“多部分/格式”}))
不要犹豫(函数(res) {
如果(res.data。状态==1){
跑龙套。通知(“成功”、“成功”,res.data.success_msg);
其他}{
跑龙套。通知(“错误”、“失败的,res.data.error_msg);
}
img.valuehttps://www.yisu.com/zixun/=?
})
.catch(函数(err) {
console.log(错);
}）;//上传之后修改了一下axios的原型链,因为全局其他页面都需要。(这里忽略)
that.Axios.defaults.headers.post(“内容类型”)=坝τ贸绦?x-www-form-urlencoded”;
that.Axios.defaults.transformRequest=function(数据){
让ret=";
(让它在数据){
ret +=encodeURIComponent (it) + '=' + encodeURIComponent(数据[它])+ ','
}
返回ret.slice (0, ret.length - 1);
}
}
先这样吧,语言组织能力不怎么样,想起来什么再补充。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
