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

 更新时间:2018年12月21日 09:36:54   作者:王小宾  
这篇文章主要介绍了vue favicon设置以及动态修改favicon的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

favicon图片放到该文件夹下。

然后再index.html中添加:

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

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

如果没有效果,则查看你的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实现学生录入系统之添加删除功能

    vue实现学生录入系统之添加删除功能

    本文给大家带来一个小案例基于vue实现学生录入系统功能,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • vue实现将图像文件转换为base64

    vue实现将图像文件转换为base64

    这篇文章主要介绍了vue实现将图像文件转换为base64,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • Vue实现图书管理案例

    Vue实现图书管理案例

    这篇文章主要为大家详细介绍了Vue实现图书管理案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue中使用codemirror的实例详解

    vue中使用codemirror的实例详解

    这篇文章主要介绍了vue中使用codemirror的实例教程,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11
  • Vue组件通信之父传子与子传父深入探究

    Vue组件通信之父传子与子传父深入探究

    对于vue来说,组件之间的消息传递是非常重要的,用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用,一般来说,组件之间可以有几种关系,下面是我对组件之间消息传递的常用方式的总结
    2022-12-12
  • vux uploader 图片上传组件的安装使用方法

    vux uploader 图片上传组件的安装使用方法

    这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 一文带你搞懂Vue3的基本语法

    一文带你搞懂Vue3的基本语法

    这篇文章主要给大家详细介绍一下Vue3中的基本语法,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,感兴趣的小伙伴可以了解一下
    2022-11-11
  • 基于Vue实现文件拖拽上传功能

    基于Vue实现文件拖拽上传功能

    文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧
    2024-03-03
  • Vue路由vue-router用法讲解

    Vue路由vue-router用法讲解

    这篇文章介绍了Vue路由vue-router的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 关于element-ui select 下拉框位置错乱问题解决

    关于element-ui select 下拉框位置错乱问题解决

    这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论