vue-element ui菜单svg图标加载不出来的解决办法

最新推荐文章于 2024-03-02 15:16:21 发布
最新推荐文章于 2024-03-02 15:16:21 发布
阅读量2.6k 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42554373/article/details/118530653
版权

1.请在package.json查看element ui的版本，如果版本过低可能出现图标加载不出来的情况，建议升级版本

2.找到svg图标的文件夹地址，然后找到vue.config.js，找到config.module里面有两处resolve(‘src/icons’)，看看路径是否正确，如果移动了包请更新路径否则图标加载不到

3.如果是动态菜单，请确认后端是否有返回图标，在layout/components/sidebar/sidebar item里面查看item标签是否正确展示

weixin_42554373
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
01-18
前言 项目需求是要引入svg文件，然后对里面的元素进行赋值，完了之后还要能够让svg放大缩小，点击查看全屏。针对上一篇文章，进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 1. 先看看svg文件的代码 思路：我的想法就是循环拿到里面的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有后面的_C和_V 的。所以需要我前端的处理。 2. 前端js代码： onWinResize(item) { // item是后台返回的数据，我数据处理函数是单独写的，没有放在接口请求后面 var svg = document.getElementById('
vue + element-ui+nodejs 商城管理系统源码.rar
10-27
商城管理系统源码，包含三部分： 1、node-elm 商城后台系统，提供数据。 技术栈：nodejs + express + mongodb + mongoose + es6/7 + vue + element-ui 2、vue2-manage 商城后台系统前端，跟node-elm是配套的 技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 3、vue2-elm 商城客户端前端，从node-elm获取数据 技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
Vue开发实例（四）Element-UI部分组件使用方法
Daniel
03-02 1198
ElementUI部分组件的使用方法，Icon、Button、Link等，其他的参考官网：https://element.eleme.cn/#/zh-CN/component/installation
vue-element-template:基于vue2 + vuecli3 + vue-route + vuex + typescript + axios + element-ui2的中台系统模版
03-11
vue3 master为功能集成模块 vue3-ts-template分支为基础模块 vue3-ts-pure为初始化项目，暂无任何功能 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行测试 yarn test 整理和修复文件 yarn lint 运行单元测试 yarn test:unit 生成所有svg组件 yarn svg # Note: need to "yarn global add vue-svgicon" first 自定义配置 请参阅。 项目相关参考： 一些安装包介绍 基于类的API声明组件 使用装饰器来简化书写依赖于vue-class-component 使用类编写vuex模块 notes使用路径的时候，需要在tsconfig.json里面的类型项添加节点
vuecli4关于Warning in ./src/plugins/element.js “export ‘default’ (imported as ‘Vue’) was not found in
Jesse_Yung的博客
06-27 5387
vuecli4关于"export ‘default’ (imported as ‘Vue’) was not found in ‘vue’ 今天把vue更新到4版本之后，使用element-ui时出现了这样的问题 旧版vue的element.js里面是这样写的 import Vue from 'vue' import { Button } from 'element-ui' Vue.use(Button) 更新之后改成这样 import { createApp } from 'vue' im
透视Matplotlib核心功能和工具包 - 不同图形格式
跨学科知识视角展现
11-27 478
关联知识 Matplotlib Python Matplotlib创建的报告和仪表板可以以不同的方式使用。 它们可以在上游Web应用程序中使用，也可以以PDF文件的形式分发，还可以嵌入到GUI工具箱中或在线交互式地使用。 在此，我们将学习如何以各种格式保存报告，以便可以将它们分发给使用者以直接使用（如PDF格式），也可以嵌入到其他应用程序（例如GUI工具箱）中。 不同格式保存图形 Matplotlib支持PNG，SVG，SVGZ，PDF，PS和EPS格式以保存图形。 我们需要在计算机上拥有各自的阅读器，
elementUI中svg图标库
热门推荐
洋成林
04-10 1万+
elementUI中需要用到大量的图标库，svg或者png格式，可以从以下路径下载 https://www.iconfont.cn/collections/index 以下载支付宝图标为例 第一步：打开上述地址，登录，找到想要下载的图标，点击进入 第二步：鼠标移动到预下载图标上，在blur出的遮罩层点击下载图标，如下 第三步：选择想要下载的图标格式，选择想要保存到的本地路径，保存...
Element-UI 如何设置和使用第三方svg菜单图标
zjg19991220的博客
08-11 3986
目录 1.简介： 2.svg-icon的工作原理： 3.如何使用？ 1.简介： （1） .svg是一种通过代码的方式来展示的图片格式。 （2）学习网站：https://www.runoob.com/svg/svg-tutorial.html （3）查找更多.svg图片地址：https://www.iconfont.cn/ 找到图标后，可以下载或者直接复制代码 2.svg-icon的工作原理： （1）目标 理解s...
【vue】图标选择（elementUI和svg结合）
Qxn530的博客
03-02 3226
在做菜单权限的时候需要选择图标，如果既想要用elementUI自带的图标，还想要自定义的图标，这时就需要二者结合一下
Vue3+Element-plus 导航菜单折叠后不显示图标问题解决
qq_37144341的博客
04-04 1078
使用最新的element plus版本(v2.3.2)写导航菜单时，发现折叠后图标不显示了，最后降低了版本(v2.2.12)可以了，有大佬介绍下什么原因吗。
基于SpringBoot+Vue+Element-ui的高校学生成绩管理系统设计源码
04-09
本资源提供了一套基于SpringBoot+Vue+Element-ui的高校学生成绩管理系统设计源码。该项目包含了134个Java源文件、64个JFIF图像文件、37个Vue文件、25个JavaScript文件、19个JPG图像文件、18个XML配置文件、15个SVG...
Vue-Gantt-chart:使用Vue做数据控制的Gantt图表
08-05
vue-gantt-chart 基于 Vue 实现的 gantt-like 图表 ,用于排班展示 Catalog template code script code data Slot block 容器块slot 有 两种 需要注意 :star: customGenerateBlocks 为 false（默认值） 的情况 :star:...
基于Vue的Element UI表单设计及代码生成器设计源码
04-09
本项目是基于Vue的Element UI表单设计及代码生成器设计源码，包含179个文件，其中120个JavaScript文件，21个SVG文件，15个Vue文件。该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案，使用户能够快速...
利用CNN进行无人售货机的商品识别.zip
05-05
无人机最强算法源码，易于部署和学习交流使用
node-v9.11.0-sunos-x86.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
ch-PP-OCRv2-det.onnx
05-05
PP-OCR det
基于TensorFlow的无人机机动飞行LSTM 时序动作网络.zip
05-05
无人机最强算法源码，易于部署和学习交流使用
ISO 16750-1-2023中文.pdf
05-05
ISO 16750-1-2023中文.pdf
node-v6.11.3-x86.msi
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
vue element-ui
08-17
Vue Element-UI 提供了一套丰富的图标库，可以通过使用 `<el-icon>` 组件来展示这些图标。以下是一些常用的图标示例： 1. 使用 Element-UI 默认图标库： ```html <el-icon name="el-icon-edit"></el-icon> ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值