Vue3动态设置网页icon图标

最新推荐文章于 2024-04-06 16:13:18 发布
最新推荐文章于 2024-04-06 16:13:18 发布
阅读量914 收藏 11
点赞数 11
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h2790832998/article/details/135064375
版权 
<!doctype html>
<html lang="en">

<head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title ref="title">Vite + Vue + TS</title>
</head>

<body>
 <div id="app"></div>
 <script type="module" src="/src/main.ts"></script>
 <script type="module">
  window.onload = function () {
   // 获取链接元素 
   var link = document.querySelector('link[rel="icon"]');  
   var title= document.getElementsByTagName("title")
   //第一步，创建XMLHttpRequest对象
   var xmlHttp = new XMLHttpRequest();
   xmlHttp.open("get", `${import.meta.env.VITE_API_URL}/api/user/getSite`, true);
   xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
     // 成功响应，处理数据 
     var responseData = JSON.parse(xmlHttp.responseText);
     let img=responseData.data.siteLogo
    //  固定写法获取接口返回的base文件转为图片
     link.href = `data:image/jpeg;base64,${img}`; // 将 '/new-icon.svg' 替换为你想要使用的动态图标路径 
     title[0].innerHTML=responseData.data.siteName
     // ... 进一步处理 responseData ... 
    } else if (xmlHttp.readyState == 4) {
     // 请求完成，但状态不是200，处理错误 
     console.error("Request failed with status:", xmlHttp.status);
    }
   };
   xmlHttp.send(""); //"
   // 更改链接 
   
  };
 </script>
</body>

</html>

Wanannyo
关注
  • 11
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个很炫的JS效果，动态的图标。
05-10
一个很炫的JS效果，立体图标。如果能把这个放到桌面上，貌似是个很酷的选择。下来看看吧。
60个new图标动态gif
12-22
new的动态gif图，有60个，做网页时能用到，gif动态的。
Element Plus如何动态切换icon
最新发布
weixin_54048131的博客
04-06 443
Element Plus最新图标引入以及使用方法，icon动态组件，点击切换图标_@element-plus/icons-vue-CSDN博客 Script中一定要引入你的icon才可以 定义一个isCollapse判断显不显示 这样就是实现切换了，用了component
vue动态修改标签页的icon、系统名称
wytraining
01-13 3571
vue动态修改标签页的icon、系统名称
微信小程序使用动态ICON让小程序活起来。使用曲线救国方式，非常有效
Qensq的博客
03-24 337
扫码查看动画效果当前使用的微信小程序是Skyline模式。webview一样可以使用，而且能更高效的直接替换URL使用。但是由于性能问题，建议在Skyline模式下使用！
vue项目--favicon设置以及动态修改favicon（网站顶头的.icon小图标）
热门推荐
muzidigbig的博客
05-29 3万+
favicon图标的制作请看我前面的文章：https://blog.csdn.net/muzidigbig/article/details/80492902 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个s...
Vue中更新浏览器图标（Favicon）
Cymiaoo
12-26 516
在Vue中更新浏览器图标（Favicon），您可以定义一个方法来动态更改页面的标签中的href属性。您可以在mounted钩子中调用这个方法，或者在用户执行某些操作时调用，以更新Favicon。在这个例子中，changeFavicon方法接收一个新的Favicon URL作为参数。如果不存在，它会创建一个新的标签并设置相应的属性，然后将这个标签加入到中。首先，它会尝试查询是否已经存在一个标签与Favicon相关。如果存在，它会更新这个标签的href属性；
vue 动态修改ico网站图标
偏执的小男孩儿
03-31 548
vue 动态修改ico网站图标
vue3中动态设置网页图标
qq_43378240的博客
10-30 485
其中link.href就是图标的地址，这里用的是请求配置接口的返回值。根据后端返回的配置数据来设置网页图标。在App.vue中加入。
vue3: 动态修改favicon(网站的ico 图标)
m0_58257035的博客
08-19 1938
动态修改网站Icon
vue3 linkicon的图标替换
u013018357的博客
02-19 1807
需要新建一个vue.config.js 跟src文件名同级。在里面添加module.exports = { lintOnSave: false, pwa: { iconPaths: { favicon32: 'tx.jpg', favicon16: 'tx.jpg', appleTouchIcon: 'tx.jpg', maskIcon: 'tx.jpg', msTileImage: 'tx.jp...
vue设置浏览器ico图标
fakuangjingling的博客
12-20 1591
【代码】vue设置浏览器icon图标。
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
vue element项目引入icon图标的方法
08-27
主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
vue使用自定义icon图标的方法
12-11
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家 效果图： 推荐使用阿里爸爸矢量图标管理，iconfont 使用方法 登录账号，找到需要的...
CSS-动态ICON
Jackie_Mina
02-06 473
CSS 动画 icon
vue-cli3更改小图标
weixin_39418338的博客
11-20 997
1、把.ico图片放到public下和index.html统一路劲 2、在vue.config.js 配置环境
vue3.0 解决浏览器小图标 ico图标更换不了的问题 记录
weixin_42508580的博客
03-09 1386
vue3设置ico图标审查元素显示如下 <!--[if IE]><linke rel="icon" herf="logo.ico" /><![endif]--> 解决方法 index.html <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpor
vue-router设置图标 icon
05-30
要在 Vue Router 中设置图标 icon，可以使用路由元信息（Route Meta Fields）来实现。 在路由定义中添加 meta 属性，然后在 meta 中添加一个名为 icon 的属性，如下所示： ``` const routes = [ { path: '/', name: 'home', component: Home, meta: { icon: 'home-icon' } }, { path: '/about', name: 'about', component: About, meta: { icon: 'about-icon' } } ] ``` 然后在你的模板中，可以通过 $route 对象来获取当前路由的元信息，并使用它来设置图标，如下所示： ``` <template> <div> <div :class="[$route.meta.icon, 'icon']"></div> <router-view></router-view> </div> </template> <style> .home-icon { background-image: url('/path/to/home-icon.png'); } .about-icon { background-image: url('/path/to/about-icon.png'); } .icon { width: 50px; height: 50px; background-repeat: no-repeat; background-position: center center; background-size: contain; } </style> ``` 这里的 $route 是 Vue Router 提供的一个对象，它包含了当前路由的信息，包括路由的 path、name、params、query 等信息，以及我们刚才定义的 meta 属性。在模板中使用 $route.meta.icon 来获取当前路由的 icon 属性，然后通过 CSS 来设置图标的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值