本文探讨了在使用Vite打包工具时，SVG图标无法正确加载的问题及其解决方案。通过import方式引入SVG，解决了动态绑定下图片显示的问题。
我是用的img标签，进行动态绑定：
这样引入，图片路径没有错误，但在页面无法加载出来。解决思路：
首先尝试将图片直接引入发现是可以渲染出来的：
但因为直接这样写导致渲染出来图片的位置并不理想，图片会加载在一级菜单的里面。
然后放在这里：
虽然图片可以加载出来，但是，这里写的是一个循环，如果不动态绑定，每个列表只能加载相同的这一个图片，也不满足需求（我想要每个列表拥有自己的小图标）
最终的解决方式：使用import引入即可解决
分析原因：
最开始的方式，看似路径正确，其实在控制台是可以发现，路径中少了一个src路径，所以导致图片无法加载，这是因为：
svg是一个矢量图，不管放大还是缩小都不会影响到它的清晰度，它实际上是一个js的代码文件，相当于是一个静态的资源。由于webpack打包太慢，我用的是vite进行打包，这就是问题的所在，在官方文档中有对静态资源处理的说明：
总结：因为svg相当于是静态资源，在vite中需要import进行静态引入。
扫一扫
4053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
