vue项目--favicon设置以及动态修改favicon
最近写公司项目时,动态更新favicon
动态更新之前需要有一个默认的favicon。
目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件。
favicon图片放到该文件夹下。
然后再index.html中添加:
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
然后刷新浏览器,就会更新。
如果没有效果,则查看你的build文件夹下:build/webpack.dev.conf.js中。(到这个步骤之前我的是出现了,并且正常显示,如果不显示,则配置一下吧。)
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);
}
}
先这样吧,语言组织能力不怎么样,想起来什么再补充。
vue项目--favicon设置以及动态修改favicon的更多相关文章
- 在vue项目中设置BASE_URL
在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue单页面应用中动态修改title
https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...
- Element中(Notification)通知组件字体修改(Vue项目中Element的Notification修改字体)
这个问题纠结很久,一样的写的为啥有的页面就可以,有的就不行: 后来才发现: 先说一下怎么设置: 先定义customClass一个属性,用来写class属性值: 之后还需要修改一下组件里style标签的 ...
- Vue项目中设置每个单页面的标题
两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{ path: '/', name: ...
- vue使用v-for循环,动态修改element-ui的el-switch
在使用element-ui的el-switch中,因为要用v-for循环,一直没有成功,后来仔细查看文档,发现可以这样写 <el-switch v-for="(item, key) i ...
- vue项目中设置跨域
config->index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/ ...
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- vue项目修改favicon
首先你的在你的static文件中添加favicon.icon 然后通过以下方式进行修改 1)方式一:修改index.html文件 <link rel="shortcut icon&qu ...
随机推荐
- (servlet页面跳转没有反应)
问题:页面跳转到/UserManager/LoginCLServlet,就一直没有反应,无法继续执行下去(servlet页面跳转没有反应) 解决: doPost()方法里面必须写成这样 正确的写法: ...
- 简单php实现同一时间内一个账户只允许在一个终端登陆
在账户表的基础上,我新建了一个账户account_session表,用来记录登录账户的account_id和最新一次登录成功用户的session_id,然后首先要修改登录方法:每次登录成功后,要将登录 ...
- POJ 2836 状压DP
Rectangular Covering Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2727 Accepted: 7 ...
- 用Go实现RabbitMQ消息收发
// amqp.Dial accepts a string in the AMQP URI format and returns a new Connection over TCP using Pla ...
- urllib使用四--urlencode,urlparse,
urllib.urlencode 把字典数据转换为URL编码 # -*- coding: cp936 -*- import urllib params = {'score':100,'name':'爬 ...
- 4 Django简介
MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...
- android 文件下载 超简单
public void downloadPlug(String downloadUrl,String savePath) { try { URL url = new URL(downloadUrl); ...
- The GNU C Library
Any Unix-like operating system needs a C library: the library which defines the ``system calls'' and ...
- asp.net 常用几种下载方式
protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来解决使 ...
- oracle数据库DB_NAME、DBID、DB_UNIQUE_NAME等的区别
目录 DB_NAME DBID DB_UNIQUE_NAME: INSTANCE_NAME: SID: SERVICE_NAME GLOBAL_DATABASE_NAME: DB_NAME ①是数据库 ...