vue写的页面title中ico图标不显示的问题

最新推荐文章于 2023-01-17 17:40:46 发布
最新推荐文章于 2023-01-17 17:40:46 发布
阅读量1.7k 收藏
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43729779/article/details/90263508
版权

首先把格式为ico的图片放在文件根目录下：
如图：
在这里插入图片描述
然后在根目录下的index.js中加入代码：

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

如图：

这时网页的title中 图标不显示，需要在build 文件夹下的webpack.dev.conf.js 文件下 写入代码 favicon:"./icon.ico"
如图：
在这里插入图片描述
然后就可以显示图标了。

时光回溯
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目打包后，浏览器上显示的页面标题前图标不显示，打包之后丢失ico图标丢失
weixin_43185419的博客
10-22 2434
问题描述： vue项目本地运行时，页面标题前的图标可以正常显示： 打包之后却变成了： 原因分析： 图标丢失 打包后路径错误 解决方式： 图标丢失 打开打包文件： 可以看到图标还在，所以排除。 打包后路径错误 打开index文件，查看在当前文件夹下，路径指向的位置是不是错了。 比如我这里icon和index.html是放在一块的，路径写成了 <link rel="icon" href="../test.ico"> 指向根目录，打包后放在服务器下运行位置就不对了。 改成：
vue：网页icon无法显示
最新发布
1111111111
05-13 241
本地源码运行后发现网页icon无法显示我们设置的logo，而是显示了浏览器默认icon。logo文件放在public文件夹下，在html里设置icon。这个问题不需要解决，部署后网页icon显示就正常了。
微信的踩坑之路----微信分享title和icon不显示
weixin_30530939的博客
04-09 1182
以前也做过微信的分享功能，但是那次比较顺利，一次通过~ 这次再次弄这个的时候发现了以前遗漏的坑。同时也在网上找了好多，大部分写的都是配置方面的问题，下边我也会写到。 问题一 微信js接口安全域名配置问题；如果你的url 为 http://www.demo.com/?type=1;则应该配置安全域名为www.demo.com 或者www.demo.com/; 当然微信的url为https:/...
vue项目设置浏览器标题title及图标
lovecoding1的博客
01-17 8075
vue项目设置浏览器标题title及图标
vue-echarts设置了title不显示
盏茶作酒的博客
04-20 1333
使用vue-echarts船舰的图标组件，图可以显示，标题不显示是怎么回事，官方的例子 使用vue-echarts船舰的图标组件，图可以显示，标题不显示是怎么回事，官方的例子 <template> <div class="map"> <h1></h1> <v-chart :options="datas" /> </div> </template> <script> import 'e
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
基于Vue20的单页面metainfo管理
08-08
Vue20中的`vue-meta-info`插件就是为了解决这个问题而设计的。 `vue-meta-info`插件允许开发者在Vue组件内部直接定义和管理元信息，这样当组件被渲染时，相应的元信息会自动应用到页面头部。这种方式使得元信息的...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
尝试使用绝对路径可能会导致问题，因为直接写死的绝对路径在开发环境和生产环境中可能不一致。比如，你可能会尝试使用`/imges/but_play.png`这样的路径，但这样在不同环境下可能无效。 解决这个问题的方法是利用`...
VuePress 静态网站生成方法步骤
10-17
title: 'Hello VuePress', description: 'Just playing around' }; ``` 对于静态资源，如图片或图标，你可以创建一个 `public` 文件夹来存放它们。例如，将 favicon 存放在 `public/image/favicon.ico`，并在配置...
How_To_Add_Icon_Image_In_Title_Bar:此html示例显示了如何在标题栏中添加带有文本的iconimage
05-05
如果你希望在标题栏中同时显示文本和图标，你可以使用`<title>`标签，但需要注意的是，HTML标准不支持直接在`<title>`中插入图像。不过，可以通过JavaScript或者CSS实现这个效果。一种常见的方法是利用伪元素和CSS...
vue title显示空白
WMW_wmw的博客
09-23 584
meta: { title: "\u200E" },
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 2939
这是因为从ElementPlus@1.20起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案
牧码的博客
08-12 1656
1、最好把 favicon.ico 放到 index.html 放到同一目录 2、在 webpack 配置文件里面配置 // 在 webpack.dev.conf.js 里面的 plugins 配置 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: tr......
vxe-table 隐藏排序图标，去掉、不显示筛选图标，更换图标
我的博客
04-16 5385
vxe-table 隐藏排序图标，去掉、不显示筛选图标，更换图标 通过设置 sort-config 和 filter-config 就可以分别设置对应的配置项： 排序： sort-config.showIcon 设置是否显示图标 sort-config.iconAsc 升序箭头图标 sort-config.iconDesc 降序箭头图标 筛选： filter-config.showIcon 设置是否显示图标 filter-config.iconNone 默认显示的图标，指定 class 字体图标 filt
前端——网页标题图标问题
Nonbady的博客
11-13 2226
第一份资料来自_夏尔 主要介绍两种方法： 1.在html文件的head部分添加下面代码（注意href的路径）。 &lt;link rel="icon" type="image/x-icon" href="icon.ico" /&gt; 你的图标格式最好是.ico格式的，手贱试了一下，发现png，jpg的格式都可以，而且浏览器会自动帮你把图片尺寸缩放到16*16。不过.ico格式体积要小很多，...
vue v-solt 解决elementUI表格设置图片列无显示问题，template solt-scope属性无效
aspire_light的博客
06-16 3640
vue v-solt 解决elementUI表格设置图片列无显示问题，template solt-scope属性无效
vue3 ＜template slot=“title“＞不显示菜单一级名称
骐骥筋力成，志在万里外
08-30 2354
vue（vue3.0）在使用具名插槽时显示为空白，展示不出来
怎么修改vue项目图标和标题
09-16
要修改 Vue 项目的图标和标题，需要在 Vue 项目的 public 目录下添加 favicon.ico 文件作为图标，并在 index.html 中通过标签修改标题。 具体步骤如下： 1. 在 public 目录下添加图标 favicon.ico 2. 在 index....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值