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 相关文章推荐
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 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中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python reduce 函数使用详解
2017/12/05 Python
python字符串的方法与操作大全
2018/01/30 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
大学生自我鉴定
2013/12/08 职场文书
继电保护工岗位职责
2014/01/05 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
中班开学寄语
2014/04/04 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2015年化验室工作总结
2015/04/23 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript