Vue3动态设置网页icon图标

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

Wanannyo

1812人浏览 · 2023-12-18 15:48:20

Wanannyo · 2023-12-18 15:48:20 发布

<!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>

GitHub 加速计划 / vu / vue

108

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：2 个月前 )

9e887079 [skip ci] 1 年前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐