svg显示不出来

Question

老师你好,请问怎么svg显示不出来
控制台没有报错,loader也安装了. 请问是什么原因呢?

Answer 1

Sunday 2023-02-04 16:25:46

记录一下该同学的解决方法：

1. 先看是否能正常应用外部资源，如果能正常引用，能确定utlis里面工具文件，没有问题

2. 再确定是否能用keys找到所有svg的数组，也同样没问题，可以确定svg-icon组件没有问题

3. 对比给到的官网use样式为0，最后确定是配置文件的问题。

4. 由于是copy的代码，配置文件未能找到自己的icon文件夹而产生的原因。
   

Answer 2

Sunday 2023-02-03 22:29:24

你好：

制作 svgIcon 组件主要的关键点如下：

1. 指定  svg -> use 标签

2. 指定对应类名

3. 将 svg 图标资源，放入到项目中

4. 通过 require.context 注册 svg 图标

5. 通过 svg-sprite-loader 来处理 svg 的加载

如果图标无法显示，那么可以根据以上点进行下检查

• 提问者 XwX5511692 #1

  老师,你好:已按照关键点 检查完 ,还是未正常显示svg呢

• 提问者 XwX5511692 #2

  会不会是我用了elementplus的全局图标的原因呢，但是我的html和网站的html也是一样的呀，目前就是svg图标的数组能打印出来，外部svg能访问，loder也下载了，配置好了config.js文件。

• 记得按时吃饭 回复 提问者 XwX5511692 #3

  回复 XwX5511692：请问你最后是怎么解决的呢？