驻风丶 2023-10-23 14:22 采纳率: 50%
浏览 7
已结题

vue3动态更改网页标题处图标

后端返回了标题和图标，标题已经更改好了，图标怎么改啊，图标的设置是在public下面的index.html里面的link设置的，怎么动态设置呢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
            content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta name="keywords" content="管理系统">
        <meta name="description" content="一个管理系统">
        <title>这个管理系统</title>
        <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
        <!-- <link rel="icon" :href="localStorage.getItem("icon")"> -->
        <!-- <link rel="icon" href="http://z.hexianzhu.com/source/icon/logos.ico"> -->
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

三个被注释掉的link
第一个link是本来的link，引用的是public下面的favicon.ico图标，这个是默认的
第二个是我引用后端传过来的图标地址，我把它存到本地缓存了，这样引用并不起作用
第三个是我直接把后端传过来的地址贴上去，是可以的
所以要怎样才能实现动态的图标呢

  • 写回答

3条回答 默认 最新

  • 驻风丶 2023-11-06 08:59
    关注

    在App.vue中加入

    let link = document.querySelector("link[rel*='icon']") || document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = respon.Data.applic_ico
document.getElementsByTagName("head")[0].appendChild(link);

    其中link.href就是图标的地址，这里用的是请求配置接口的返回值

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 11月14日
  • 已采纳回答 11月6日
  • 创建了问题 10月23日

悬赏问题

  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等
  • ¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中？
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行