【Vue2项目debug】——动态引入svg图片不生效
虽然图片可以加载出来,但是,这里写的是一个循环,如果不动态绑定,每个列表只能加载相同的这一个图片,也不满足需求(我想要每个列表拥有自己的小图标)svg是一个矢量图,不管放大还是缩小都不会影响到它的清晰度,它实际上是一个js的代码文件,相当于是一个静态的资源。但因为直接这样写导致渲染出来图片的位置并不理想,图片会加载在一级菜单的里面。总结:因为svg相当于是静态资源,在vite中需要import进行
·
我是用的img标签,进行动态绑定:
这样引入,图片路径没有错误,但在页面无法加载出来。解决思路:
首先尝试将图片直接引入发现是可以渲染出来的:
但因为直接这样写导致渲染出来图片的位置并不理想,图片会加载在一级菜单的里面。
然后放在这里:
虽然图片可以加载出来,但是,这里写的是一个循环,如果不动态绑定,每个列表只能加载相同的这一个图片,也不满足需求(我想要每个列表拥有自己的小图标)
最终的解决方式:使用import引入即可解决
分析原因:
最开始的方式,看似路径正确,其实在控制台是可以发现,路径中少了一个src路径,所以导致图片无法加载,这是因为:
svg是一个矢量图,不管放大还是缩小都不会影响到它的清晰度,它实际上是一个js的代码文件,相当于是一个静态的资源。由于webpack打包太慢,我用的是vite进行打包,这就是问题的所在,在官方文档中有对静态资源处理的说明:
总结:因为svg相当于是静态资源,在vite中需要import进行静态引入。
更多推荐
已为社区贡献1条内容
所有评论(0)