vue favicon设置以及动态修改favicon的方法


Posted in Javascript onDecember 21, 2018

最近写公司项目时,动态更新favicon

动态更新之前需要有一个默认的favicon。

目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件。

vue favicon设置以及动态修改favicon的方法

favicon图片放到该文件夹下。

然后再index.html中添加:

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow" >

然后刷新浏览器,就会更新。

如果没有效果,则查看你的build文件夹下:build/webpack.dev.conf.js中。(到这个步骤之前我的是出现了,并且正常显示,如果不显示,则配置一下吧。)

vue favicon设置以及动态修改favicon的方法

new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   favicon:'../stastic/favicon.ico'
  }),

到这个时候,页面的favicon已经可以正常显示了。

然而,如何从服务器动态获取图片呢,这样以来就可以像上传文件一样,随意更换favicon。先看一下stackoverflow上的回答

(function() {
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = 'http://www.stackoverflow.com/favicon.ico';
  document.getElementsByTagName('head')[0].appendChild(link);
})();

动态创建link标签,然后添加元素。我目前写的项目是从前端上传到服务器的图片,关于如何上传图片,额,粘贴一下代码吧。

logoFirstChange(val) {
    let that = this; 
    let Fr = new FileReader;
    let file = val.target.files[0];
//获取需要更换的img的id,我这里更换的图片比较多,并且方法都一样,所以写同样的方法里面了。
    let img = document.getElementById(val.srcElement.name.split('|')[0]);
    Fr.readAsDataURL(file);
    Fr.onloadend = function () {
     img.src = this.result;
    };
    let fd = new FormData();
//addend('参数名','参数值'),参数名需要和后端对应
    fd.append('InputFile', file);
    fd.append('logo_id', val.srcElement.name.split('|')[1]);
//vue项目中为了方便更改一下axios原型链,其实就是发送一个axios请求。这里正常的axios就行,不用谢Blob类型,没什么用,我当时是为了测试一下这个类型。
    that.Axios.post(that.prefix + '/yr_logo/logo_update/',fd,new Blob([fd], { type: 'multipart/form-data' }))
     .then(function (res) {
      if (res.data.status == 1) {
       util.notification('success', '成功', res.data.success_msg);
      } else {
       util.notification('error', '失败', res.data.error_msg);
      }
       img.value = '';
     })
     .catch(function (err) {
      console.log(err);
     });
//上传之后修改了一下axios的原型链,因为全局其他页面都需要。(这里忽略)
    that.Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    that.Axios.defaults.transformRequest = function (data) {
     let ret = '';
     for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
     }
     return ret.slice(0, ret.length - 1);
    }
   }

先这样吧,语言组织能力不怎么样,想起来什么再补充。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 #Javascript
微信小程序实现随机验证码功能
Dec 20 #Javascript
微信小程序实现发送验证码按钮效果
Dec 20 #Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 #Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 #Javascript
js canvas实现橡皮擦效果
Dec 20 #Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 #Javascript
You might like
php常用Stream函数集介绍
2013/06/24 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
中学家长会邀请函
2014/01/17 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
青蓝工程实施方案
2014/03/27 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
五好家庭事迹材料
2014/12/20 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
行政诉讼答辩状
2015/05/21 职场文书
高中体育课教学反思
2016/02/16 职场文书
python基础之匿名函数详解
2021/04/21 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript