我是用的img标签,进行动态绑定:

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

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

  

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

然后放在这里:

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

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

 分析原因

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

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

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

Logo

前往低代码交流专区

更多推荐