欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法

 更新時(shí)間:2018年12月21日 09:36:54   作者:王小賓  
這篇文章主要介紹了vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近寫公司項(xiàng)目時(shí),動(dòng)態(tài)更新favicon

動(dòng)態(tài)更新之前需要有一個(gè)默認(rèn)的favicon。

目前vue-cli搭建的vue項(xiàng)目里面已經(jīng)有了一個(gè)static文件夾,存放靜態(tài)文件。

favicon圖片放到該文件夾下。

然后再index.html中添加:

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

然后刷新瀏覽器,就會(huì)更新。

如果沒有效果,則查看你的build文件夾下:build/webpack.dev.conf.js中。(到這個(gè)步驟之前我的是出現(xiàn)了,并且正常顯示,如果不顯示,則配置一下吧。)

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

到這個(gè)時(shí)候,頁面的favicon已經(jīng)可以正常顯示了。

然而,如何從服務(wù)器動(dòng)態(tài)獲取圖片呢,這樣以來就可以像上傳文件一樣,隨意更換favicon。先看一下stackoverflow上的回答

(function() {
  var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.;
  document.getElementsByTagName('head')[0].appendChild(link);
})();

動(dòng)態(tài)創(chuàng)建link標(biāo)簽,然后添加元素。我目前寫的項(xiàng)目是從前端上傳到服務(wù)器的圖片,關(guān)于如何上傳圖片,額,粘貼一下代碼吧。

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('參數(shù)名','參數(shù)值'),參數(shù)名需要和后端對(duì)應(yīng)
    fd.append('InputFile', file);
    fd.append('logo_id', val.srcElement.name.split('|')[1]);
//vue項(xiàng)目中為了方便更改一下axios原型鏈,其實(shí)就是發(fā)送一個(gè)axios請(qǐng)求。這里正常的axios就行,不用謝Blob類型,沒什么用,我當(dāng)時(shí)是為了測(cè)試一下這個(gè)類型。
    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的原型鏈,因?yàn)槿制渌撁娑夹枰?。(這里忽略)
    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);
    }
   }

先這樣吧,語言組織能力不怎么樣,想起來什么再補(bǔ)充。

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能

    vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能

    本文給大家?guī)硪粋€(gè)小案例基于vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)功能,代碼簡單易懂非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2018-07-07
  • vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64

    vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64

    這篇文章主要介紹了vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-02-02
  • Vue實(shí)現(xiàn)圖書管理案例

    Vue實(shí)現(xiàn)圖書管理案例

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • vue中使用codemirror的實(shí)例詳解

    vue中使用codemirror的實(shí)例詳解

    這篇文章主要介紹了vue中使用codemirror的實(shí)例教程,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-11-11
  • Vue組件通信之父?jìng)髯优c子傳父深入探究

    Vue組件通信之父?jìng)髯优c子傳父深入探究

    對(duì)于vue來說,組件之間的消息傳遞是非常重要的,用vue可以是要組件復(fù)用的,而組件實(shí)例的作用域是相互獨(dú)立,這意味著不同組件之間的數(shù)據(jù)無法互相引用,一般來說,組件之間可以有幾種關(guān)系,下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)
    2022-12-12
  • vux uploader 圖片上傳組件的安裝使用方法

    vux uploader 圖片上傳組件的安裝使用方法

    這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • 一文帶你搞懂Vue3的基本語法

    一文帶你搞懂Vue3的基本語法

    這篇文章主要給大家詳細(xì)介紹一下Vue3中的基本語法,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue3有一定的幫助,感興趣的小伙伴可以了解一下
    2022-11-11
  • 基于Vue實(shí)現(xiàn)文件拖拽上傳功能

    基于Vue實(shí)現(xiàn)文件拖拽上傳功能

    文件拖拽上傳功能現(xiàn)在已經(jīng)隨處可見,大家應(yīng)該都用過了吧,那么它具體是怎么實(shí)現(xiàn)的大家有去了解過嗎,今天我們一起來實(shí)現(xiàn)一下這個(gè)功能,并封裝一個(gè)拖拽上傳組件吧
    2024-03-03
  • Vue路由vue-router用法講解

    Vue路由vue-router用法講解

    這篇文章介紹了Vue路由vue-router的用法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-01-01
  • 關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決

    關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決

    這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論