【Vue2项目debug】——动态引入svg图片不生效

我是用的img标签，进行动态绑定：

这样引入，图片路径没有错误，但在页面无法加载出来。解决思路：

首先尝试将图片直接引入发现是可以渲染出来的：

  

但因为直接这样写导致渲染出来图片的位置并不理想，图片会加载在一级菜单的里面。

然后放在这里：

虽然图片可以加载出来，但是，这里写的是一个循环，如果不动态绑定，每个列表只能加载相同的这一个图片，也不满足需求（我想要每个列表拥有自己的小图标）

最终的解决方式：使用import引入即可解决

 分析原因：

最开始的方式，看似路径正确，其实在控制台是可以发现，路径中少了一个src路径，所以导致图片无法加载，这是因为：

svg是一个矢量图，不管放大还是缩小都不会影响到它的清晰度，它实际上是一个js的代码文件，相当于是一个静态的资源。由于webpack打包太慢，我用的是vite进行打包，这就是问题的所在，在官方文档中有对静态资源处理的说明：

总结：因为svg相当于是静态资源，在vite中需要import进行静态引入。