vue网页图标设置及不显示问题

最新推荐文章于 2024-12-18 14:50:26 发布
最新推荐文章于 2024-12-18 14:50:26 发布
阅读量973 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61828394/article/details/126223605
版权

修改图标名字

在这里插入图片描述
修改html文件
如果还未显示
在这里插入图片描述
pwa: {
iconPaths: {
favicon32: ‘favicon.ico’,
favicon16: ‘favicon.ico’,
appleTouchIcon: ‘favicon.ico’,
maskIcon: ‘favicon.ico’,
msTileImage: ‘favicon.ico’
}
},

m0_61828394
关注
vue2/3 - 实现微信转发或分享朋友圈带缩略图、标题和描述，解决微信分享缩略图无法显示，将网页链接url或文章分享给微信好友或微信朋友圈时发现图片不显示缩略图无法加载生效（vue页面集成微信分享）
高级前端工程师
04-07 9555
vue2，vue3，微信公众号H5网页，在微信中不显示缩略图，自定义缩略图不显示怎么办，分享卡片缩略图偶尔显示不出，微信分享网页链接缩略图不显示，vue微信分享缩略图无法显示的解决办法，分享网页链接到微信朋友圈，分享链接，vue解决微信分享链接不能显示缩略，微信H5 分享微信朋友圈展示链接，不是缩略图卡片的原因与解决方案，vue3微信分享朋友圈没有获取标题描述，VUE微信分享链接或网站文章到微信朋友圈,缩略图片不显示，h5微信分享只是链接，微信分享网页 图标不显示，微信分享链接的缩略图和标题，微信分享链接或
Vite 打包的 Vue3 组件库，图标无法显示
**My Coding Family**
05-18 1366
ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；
vue小图标favicon不显示的解决方案
08-29
本篇文章主要介绍了vue小图标favicon不显示的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue：网页icon无法显示
1111111111
05-13 549
本地源码运行后发现网页icon无法显示我们设置的logo，而是显示了浏览器默认icon。logo文件放在public文件夹下，在html里设置icon。这个问题不需要解决，部署后网页icon显示就正常了。
Vue浏览器图标修改不起作用
qq_43209924的博客
03-21 2752
在index.html文件下的head里面添加 <link rel="icon" type="image/x-icon" href="static/chat.ico"> 如果图标没有生效，则查看你的build文件夹下：build/webpack.dev.conf.js中。添加：favicon: 'static/chat.ico' 然后重启项目就OK了 ...
vue打包之后浏览器图标设置直接没有输出，vue打包之后浏览器图标不显示
weixin_43779406的博客
01-15 947
打包之前的部分index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <title>xxxx</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl.
vue图标不显示
jyf_568的博客
06-04 533
静态:有可能路径错误。
vue底部图标和页面切换
05-30
在Vue.js框架中，Mint UI是一个非常受欢迎的UI组件库，它提供了丰富的界面元素，如按钮、表单、栅格、图标等，为开发者构建美观的移动端应用提供了便利。在"vue底部图标和页面切换"这个项目中，我们将探讨如何使用...
Vue3 中实现 SVG 图标系统
最新发布
12-30
随着技术的发展，Web 应用程序的图标越来越多地采用 SVG 格式，因为它具有矢量特性，可以无损缩放，并且体积相对较小，非常适合用于网页。然而，手动管理 SVG 图标会带来许多不便，例如需要手动注册每个图标组件、...
为vue项目网站设置ioc小图标遇到的问题
yanzi_0216的博客
12-29 466
为vue项目网站设置ioc小图标遇到的问题 步骤 1，将 favicon.ico 图标文件放在src目录下（我这是为了将其与index.html文件放在同一文件夹下，其实也可以放在src/images文件夹下） 2，在 index.html 文件中引入 ico 图标 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport
vue 网页点击置顶图标缓慢置顶
sinat_41657240的博客
04-12 1549
利用js实现网页置顶缓动效果子组件父组件 子组件 <template> <div class="content_container_top" v-show="toTopShow"> <div @mouseenter="ico = false" @mouseleave="ico = true" @click="scrollToTop" title="返回置顶" > <span class=
去掉vue项目的浏览器图标
热门推荐
weixin_38999134的博客
05-21 1万+
index.html <!-- 去掉vue项目默认图标 --> <link rel="shortcut icon" href="#"/> 在webpack.dev.conf.js和webpack.prod.conf.js文件中 全局搜索favicon，注释掉favicon相关代码 删掉根目录下的favicon.ico文件
微前端中，Vue动态设置浏览器图标可火狐浏览器却不采用主应用图标的问题
weixin_43589827的博客
07-10 507
有一个需求，需要根据系统（使用乾坤微前端搭建的系统，里面有多个子应用）的配置，去修改系统在浏览器中标签页的图标。 而 Vue 的图标默认是这个： BASE_URL 是 process.env 环境中的一个变量，默认是根目录，而它下面的 favicon.ico 就是 index.html 旁边的 favicon.ico 文件了，一般是 Vue 自带的图标。 首先我想到了两个思路去处理这个动态设置图标的需求： 设置一个变量，通过修改这个变量，达到动态修改图标 直接用获取这个 link 节点的方式，去修改它
vue项目中图标显示不出来解决方法
weixin_65243943的博客
02-08 3601
问题背景：在本地环境运行可以正常显示，打包后发给后台不显示。 解决方法： build文件夹中的util.js中，加上publicPath: '../../'，就可以了。
Vue3中修改link标签的icon无效（修改浏览器标签图标）
weixin_42884605的博客
12-18 640
我找了个icon图标更换掉favicon.ico文件，直接替换,发现并不生效（特殊情况）,把直接改成./发现也不生效,怎么回事呢?今天在vue3项目中，修改浏览器标签图标，在public/index.html文件中修改link的icon无效。怎么改，都没发生变化。于是我开始找问题，f12打开浏览器调试台查看结构中的icon link href指向。居然有那么多图标地址，看官方配置,原来是忽略了。，图标就换成我们自己的了...
vue 改变网站图标favicon.ico谷歌浏览器不显示的问题
Charonmomo的博客
11-02 2020
描述 替换项目中的 favicon.ico 以后, 在其他浏览器中可以正常显示. 谷歌浏览器中清除了缓存但还是不能显示替换以后的 favicon.ico 图标. index.html 中的语句: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 解决方法 谷歌浏览器缓存的问题, 用 Ctrl + F5 强制刷新一下浏览器就可以了. ...
解决修改浏览器title的logo不显示问题，附加本地运行打包的dist文件方法
l2345432l的博客
08-05 1252
旧版本含build文件的vue项目修改logo 在build文件下的webpack.dev.conf.js 修改如下信息： new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon:'./src/assets/logo.png' // 添加logo代码 }), 在build文件下的webpack.prod.conf.js 修改如下信息： new HtmlWebp
vue写的页面title中ico图标不显示的问题
weixin_33762321的博客
05-17 1425
首先把格式为ico的图片放在文件根目录下： 如图： 然后在根目录下的index.js中加入代码 如图： 这时网页的title中 图标不显示，需要在build 文件夹下的webpack.dev.conf.js 文件下 写入代码 favicon:"./icon.ico" 如图： 然后就可以显示图标了。 ...
vue网页标题图标如何设置
12-17
在Vue项目中设置网页标题图标（也称为favicon），通常是在项目的`public`文件夹下创建一个名为`.ico`、`.png`、`.jpg`或`.svg`的小图标文件。然后，在HTML模板的`<head>`部分通过`<link>`标签将其关联到`<title>`元素。以下是一个简单的步骤说明： 1. **创建图标文件**： - 在`public`文件夹下新建一个文件夹（如`favicon`），并将你的图标文件放在这里。 - 例如，你可以创建一个`favicon.ico`图标文件，尺寸通常推荐16x16像素或32x32像素。 2. **在main.js或vue.config.js中配置**： - 对于Vue CLI 3.x及以上版本，可以在`vue.config.js`文件中设置默认的图标： ```javascript module.exports = { favicon: path.resolve(__dirname, 'public/favicon.ico') }; ``` - 或者在`src`目录下的`main.js`或某个组件内的生命周期钩子里动态设置： ```javascript new Vue({ //... created() { const iconLink = document.createElement('link'); iconLink.rel = 'shortcut icon'; iconLink.href = require('@/assets/favicon.ico'); // 从静态资源路径引用 document.head.appendChild(iconLink); }, //... }); ``` 3. **在HTML头部添加图标链接**： - 如果你想让特定页面有自己的图标，可以在相应的组件模板 `<head>` 中添加： ```html <head> <!-- 其他head内容 --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> </head> ``` 记得在浏览器开发者工具的Favicon部分检查图标是否已经正确显示。如果要在不同设备和浏览器上保持一致，还可以提供其他格式的图标，比如`.apple-touch-icon.png`用于iOS设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值