本地引入Element UI后导致图标显示异常

引入方式

npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- import Vue before Element  -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript   引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

本地引入

初学后端的学员们,还未了解NPM,无法快速管理和构建纯前端项目。

而CDN常因为网络问题导致相关资源无法下载,更多习惯了本地引入资源文件。

  • 若宽带网络无法访问,可以尝试使用手机热点

该链接地址粘贴在浏览器中就可以得到本地的index.jsindex.css两个文件

缺陷

现象

将上述两个文件引入后,样式可以正常使用,但图标无法正常显示。

在这里插入图片描述

原因

CSS文件中基于相对路径引入图标文件

@font-face {font-family:element-icons;src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal
}

在这里插入图片描述

现在需求,想办法获得element-icons.woffelement-icons.ttf文件

解决方案

图标地址

图标下载连接

https://unpkg.com/browse/element-ui@2.15.1/lib/theme-chalk/fonts/

在这里插入图片描述

下载图标

在这里插入图片描述

本地文件层次结构

在这里插入图片描述

正常显示效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

blender Texture Coordinate Node

Texture Coordinate Node — Blender Manual Generated纹理坐标是一种自动生成的纹理坐标&#xff0c;它不需要用户指定任何UV映射或对象空间。它是基于对象的边界框的坐标&#xff0c;也就是说&#xff0c;它是根据对象的最小点和最大点来定义的。 对象的边界框是一个包围对…

使用requests发请求操作Elasticsearch【一】

本文为博主原创&#xff0c;未经授权&#xff0c;严禁转载及使用。 本文链接&#xff1a;https://blog.csdn.net/zyooooxie/article/details/123730279 之前在测试环境查es数据&#xff0c;在用 Kibana&#xff1b;可下半年&#xff0c;因为某些原因 就不能用了。我就想着用代…

[NSSRound#3 Team]This1sMysql

[NSSRound#3 Team]This1sMysql 源码 <?php show_source(__FILE__); include("class.php"); $conn new mysqli();if(isset($_POST[config]) && is_array($_POST[config])){foreach($_POST[config] as $key > $val){$value is_numeric($var)?(int)$…

【linux】日志管理和分析

一、概述 在Linux系统的管理和运维中&#xff0c;日志文件起到至关重要的作用。它们记录了系统运行过程中的各种事件&#xff0c;包括系统故障、性能数据和安全事件。 二、 日志的作用和分类 日志的作用 日志文件记载了系统的生命线&#xff0c;利用它们可以&#xff1a; 1…

ubuntu22.04 手动分区说明

主分区和逻辑分区的区别 主分区&#xff1a;主分区是硬盘分区表中的前四个分区&#xff0c;用于安装操作系统、创建引导分区等。主分区可以设置为启动分区和活动分区&#xff0c;是直接在硬盘上划分的。要在硬盘上安装操作系统&#xff0c;则硬盘必须有1个主分区。 逻辑分区&…

震惊!原来这就是JavaScript闭包的秘密

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

Qt 中如何将图片转化为yuv420p

使用 QImage 存储的图片&#xff0c;如果想转成yuv420p 发送出去&#xff0c;该怎么办呢&#xff1f; QImage 存储图片有多种格式&#xff0c;可以通过image.format() 查看当前的格式&#xff1b; 建议通过将格式转换为mage.convertToFormat(QImage::Format_RGB888)&#xff0c…

硬盘基本知识(磁头、磁道、扇区、柱面)

概述 盘片&#xff08;platter&#xff09; 磁头&#xff08;head&#xff09; 磁道&#xff08;track&#xff09; 扇区&#xff08;sector&#xff09; 柱面&#xff08;cylinder&#xff09; 盘片 片面 和 磁头 硬盘中一般会有多个盘片组成&#xff0c;每个盘片包含两个面…

Eviews 11安装包下载及安装教程

Eviews 11下载链接&#xff1a;https://docs.qq.com/doc/DUmRGdXVUeVBSU1lK 1.选中下载好的安装包&#xff0c;右键解压到“Eviews 11”文件夹 2.选中"Setup.exe"鼠标右键选择以管理员身份运行 3.点击“Next” 4.勾选“I Accept...”&#xff0c;点击“Next” 5.选择…

理解String 及 String.intern() 在实际中的应用

1. 首先String不属于8种基本数据类型&#xff0c;String是一个对象。     因为对象的默认值是null&#xff0c;所以String的默认值也是null&#xff1b;但它又是一种特殊的对象&#xff0c;有其它对象没有的一些特性。   2. new String()和new String(“”)都是申明一个…

记一次 .NET某工控 宇宙射线 导致程序崩溃分析

一&#xff1a;背景 1. 讲故事 为什么要提 宇宙射线, 太阳耀斑 导致的程序崩溃呢&#xff1f;主要是昨天在知乎上看了这篇文章&#xff1a;莫非我遇到了传说中的bug&#xff1f; &#xff0c;由于 rip 中的0x41变成了0x61出现了bit位翻转导致程序崩溃&#xff0c;截图如下&am…

Jenkins接口调用

Jenkins是好用&#xff0c;但是接口文档写的稀烂 1、授权&#xff0c;Jenkins不推荐使用创建单个任务时创建的token&#xff0c;推荐这个用户下的创建user token。 点击自己账号信息&#xff0c;即可创建token。 2、postman选择basic auth&#xff0c;输入账号密码&#xff0…

CentOS 7 基于官方源码和openssl制作openssh 9.6 rpm包(含ssh-copy-id) —— 筑梦之路

之前写了一篇&#xff1a; CentOS 7 制作openssh 9.6 rpm包更新修复安全漏洞 —— 筑梦之路_升级openssh9.6-CSDN博客 有好几个网友反馈&#xff0c;ssh-keygen生成密钥存在问题&#xff0c;之前的rsa \ dsa加密算法用不了&#xff0c;因此写了一篇&#xff1a; 关于openssh…

MMDETECTION3D 使用kitti格式的数据集跑centerpoint模型

MMDETECTION3D 使用kitti格式的数据集跑centerpoint模型 1 修改配置文件configs/centerpoint/centerpoint_pillar02_kitti_3d.py 如下 # """configs/centerpoint/centerpoint_pillar02_kitti_3d.py""" _base_ = [../_base_/datasets/centerpo…

nginx 二、配置域名

文章目录 一、配置本地域名查看虚拟机ip修改hosts文件测试域名是否配置成功 二、配置aliyun域名三、实践1.创建html2.配置nginx3.测试服务器内部测试页面测试 总结 docker中启动nginx容器完成如下操作&#xff0c;对于docker安装nginx可以看这篇文章 nginx 一、安装与conf浅析 …

Linux上搭建YApi

YApi是http接口管理和测试的重要工具&#xff0c;其作用相当于原来用的postman&#xff0c;但是比postman有更多的功能&#xff0c;本篇文章主要介绍如何在linux环境中快速的安装&#xff08;利用yum命令安装&#xff09;和部署YApi 一、nodejs 安装 1.1 下载nodejs包 yum i…

Harbor配置同步规则删除不掉

【问题原因】 harbor上主从两个仓库&#xff0c;配置同步规则时&#xff0c;定时任务配置太频繁&#xff0c;导致规则修改&#xff0c;删除都失败。 【问题现象】 点击修改后保存&#xff0c;页面报internal server error的错。 【问题排查】 docker ps | grep harbor 查看…

Linux 系统 curl 命令详解

curl 是一个功能强大的命令行工具&#xff0c;用于与 Web 服务器进行数据通信。它支持多种协议&#xff0c;如 HTTP、HTTPS、FTP、SFTP、SMTP 等&#xff0c;并提供了丰富的选项和参数来执行各种操作&#xff0c;如发送请求、下载文件、上传文件等。下面我将详细介绍 curl 命令…

仓库管理软件有哪些比较好用?

“仓库管理软件有哪些比较好用&#xff1f;” “好用&#xff0c;却不一定适合。” 有时候&#xff0c;不是某个仓库管理软件不好用&#xff0c;而是它不适合你们企业。 制造业企业的仓库管理场景&#xff0c;随着制造业企业规模的扩大&#xff0c;逐步精细化&#xff0c;企…

JAVA基础学习笔记-day12-泛型

JAVA基础学习笔记-day12-泛型 1. 泛型概述1.1 泛型的引入 2. 使用泛型举例2.1 集合中使用泛型2.2 相关使用说明 3. 自定义泛型结构3.1 泛型的基础说明3.2 自定义泛型类或泛型接口3.2.1 说明3.2.2 注意 3.3 自定义泛型方法3.3.1 说明 4. 泛型在继承上的体现5. 通配符的使用5.1 通…