普通html使用引入element-ui,图标出错

利用CDN引入element-ui,图标显示出现错误。

利用网页链接形式引入可以正常显示。
在这里插入图片描述

将网站文档下载至本地,再引用就会出错。
在这里插入图片描述

例如使用element-ui里面的走马灯,两侧的箭头图标不能正常显示。
在这里插入图片描述

先按照按照网上的方法,下载element-ui文件到本地。再将index.css(路径:element-ui/lib/theme-chalk/index.css)和index.js(路径:element-ui/lib/index.js)文件导入项目中。
在这里插入图片描述

如果按照这种方法依旧无法解决,可以继续看下去。

按照这种方法仍然没有解决问题,图标依旧无法正常显示,所以尝试将整个element-ui导入项目,经测试后可以正常使用。
在这里插入图片描述

在这里插入图片描述

还有一种方法,如果已经安装过npm,则可以使用npm引入element-ui.(由于是普通html项目,不是vue项目,所以无法像官方文档里描述的那样修改文件直接使用。)

在当前项目(普通html项目)中打开终端,使用npm安装element-ui。
在这里插入图片描述

在这里插入图片描述

引入成功后,项目中会出现一个node-modules文件夹,可以在里面找到element-ui,然后根据路径找到index.js和index.css进行引用(按照node_modules/element-ui/lib/index.js和node_modules/element-ui/lib/theme_chalk/index.css路径引用)。
在这里插入图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值