vue-动态加载本地SVG文件

最新推荐文章于 2026-05-15 06:35:08 发布
原创 最新推荐文章于 2026-05-15 06:35:08 发布 · 1.4k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue
本文介绍了在Vue项目中引入并使用SVG图标的过程，包括将SVG图标放入本地目录，通过import导入Vue文件，数据初始化及在模板中遍历绑定。示例代码展示了具体实现步骤。

效果：
在这里插入图片描述
大概过程：
1.把svg图标放到本地目录下
2.import 到使用的vue文件
3.data初始化
4.遍历时绑定上
代码测试示例：
在这里插入图片描述

vue动态加载SVG文件并修改节点数据的操作代码
11-19
先上一个马赛克图片叭。 接领导需求，动态实现电路图， 并附带放大、缩小功能、 以及不同的回路点击能弹窗显示相关节点的更多信息， 通俗一点讲： 随着用户点击放大和缩小， 点击位置保持不变，而且能实现点击交互。 初接触的时候，觉得根本没法下手呀，说说自己的思路叭， 从随着用户点击放大缩小位置不变，想到了SVG 但是需要动态加载进来呀，而且还需要需求不同节点的电流值， 从放大缩小来看， 首先想到的是 D3 在集合领导给的部分相关资料 综上： 进行了可行性的方案试探，也完成了整个功能的开发。 且听我细细道来开发遇到的问题，以及怎处理叭 SVG 在 谷歌， 以及 微软中国，拼命的搜索
动态加载svg，根据path路径移动动画，配置关键帧实现动画效果（移动和透明度）最后附上gitee地址
qq_40011214的博客
06-06 3608
svg路径关键帧动画效果。
Vue中动态加载SVG文件并绑定事件、修改节点数据
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
05-23 1万+
大致的流程是这样的：实现这个需求是首先通过一个工具（drawio）去自定义绘制图形，然后导出一个svg格式的文件，后端搞了一下drawio工具的源码，在导出的时候，为绘制的图形上每个节点都去绑定了一个id（具体是怎么搞得我一个前端也不是太清楚），最后导出，然后前端需要去加载svg，然后每个节点都会有对应的数据（就是根据绑定的id去获取），然后有些节点上还可能有图片，还需要替换，还可能为每个节点去绑定事件做一些事情。然后还使用了d3实现了让svg可以缩放拖拽。大概是这个亚子 先上一张自己测试用的svg .
[vue]加载svg文件之svg-sprite-loader
前端
03-04 2389
SVG的显示 通过网上方式都没成功,引入路径，总是失败，经过多次的测试终于发现是svg的加载出了问题，记录一下，方便以后的使用 SVG的加载 工具 初始化svg加载工具 "svg-sprite-loader": "^6.0.11" 配置 vue.config.js中配置svg文件的加载 module.exports ={ chainWebpack(config) { config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
【Vue2项目debug】——动态引入svg图片不生效
qq_50497708的博客
10-14 4226
虽然图片可以加载出来，但是，这里写的是一个循环，如果不动态绑定，每个列表只能加载相同的这一个图片，也不满足需求（我想要每个列表拥有自己的小图标）svg是一个矢量图，不管放大还是缩小都不会影响到它的清晰度，它实际上是一个js的代码文件，相当于是一个静态的资源。但因为直接这样写导致渲染出来图片的位置并不理想，图片会加载在一级菜单的里面。总结：因为svg相当于是静态资源，在vite中需要import进行静态引入。这样引入，图片路径没有错误，但在页面无法加载出来。：使用import引入即可解决。
vue svg图的显示及动态引入
weixin_50622621的博客
01-03 2065
【代码】vue svg图的显示及动态引入。
Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（Icon篇）
weixin_48453209的博客
06-07 3971
最近，在项目的开发中，我们规划了一个Icon组件，我们希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且...
vue3+vite+TS封装本地svg图标库（不用安装任何插件）
byebukesi的博客
09-11 1080
一般vue开发的项目都会搭配饿了么组件库使用，里面的图标够小项目的需求了，链接:实在不行，阿里妈妈开发的矢量图标库IconFont里绝对可以找你需要的图标。链接:。但是，当你的项目需要动态加载图标时，或是遇到“用户自定义目录时可选择图标”这样的需求时，你就需要封装一个本地的svg图标库了，或者你有幸担起了公司里架构师的位置时，封装各种组件库也是必定会遇到的问题。下面介绍的方法无需安装任何插件，优点是操作简单，当然也有缺点，相对没有特别灵活。
实战-插入svg文件节点
qq_35485206的博客
04-19 54
props: {},data() {return {},watch: {},},
Vue + bpmn.js实战：如何优雅地解析并高亮展示本地的.bpmn文件？
最新发布
weixin_30698527的博客
05-15 432
本文详细介绍了如何使用Vue和bpmn.js解析并高亮展示本地BPMN文件的全流程。从环境配置、文件加载到动态高亮实现，涵盖了核心技术和工程实践，帮助开发者高效处理业务流程管理系统的前端需求。
Vue 中 SVG 动态渲染 包括（绑定事件，修改元素，SVG缩放） 支持PC 移动端
C_jian_的博客
03-05 5894
Vue 中 SVG 动态渲染 包括（绑定事件，修改元素，SVG缩放） 支持PC 移动
vue3 require动态加载图片及动态加载svg图
weixin_49066399的博客
03-26 1329
以下是本地图片及引用本地的svg图报错。2.解决本地引用svg图。1.解决本地图片引用。
vue加载远程的svg文件
stpzhf的博客
04-24 1607
准备把系统中svg提取出来放到服务器上面然后就遇到了一系列的问题 本来可以使用img,object, embed标签就能解决但是由于使用svg 填充颜色属性。然后就不停的百度 百度 .... 好在最终还是曲线救国成功的解决了这个问题。
Vite for Vue项目中使用vite-plugin-svg-icons插件加载svg图标为组件使用
Wrysmile0308的博客
02-23 5000
Vite for Vue项目中使用vite-plugin-svg-icons插件加载svg图标为组件使用
vue 引入动态svg
q915730058的博客
04-01 2006
亲测可用，如果有其他方法也可以告诉我 <template> <embed :src="svgImg" width="100" type="image/svg+xml"/> </template> import svg from './xx.svg'; <script> export default { data(){ return { svgImg: svg } } } </script> ...
vue3项目中, 使用vite-plugin-svg-icons这个插件自动加载svg图标的最全的流程
AYNGyang的博客
04-26 3120
在项目中怎么快捷的应用svg格式图标,图片等
在vue中使用svg（组件）
m0_65835778的博客
12-08 6092
vue项目把svg作为组件使用
Vue 加载 SVG 图片文件
学习笔记
12-25 1888
Vue 加载 SVG 图片文件 export default { // LOGO logo: require('./logo.svg'), logo_content: require('./logo_content.svg'), logo_content_saved: require('./logo_content_saved.svg'), logo_title: require('./logo_title.svg'), logo_title_saved: r
vue项目引入svg图标的完整步骤
weixin_50986057的博客
07-13 2317
vue项目引入svg图标的完整步骤
如何在VUE项目中使用svg图标
热门推荐
悟其浅而深修，沉其心而精进
07-01 2万+
本文手把手带你一起体验SVG图标的使用，解决大家使用图标的苦恼！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我先来一碗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值