Vue中SVG不显示的问题及解决方案

最新推荐文章于 2025-03-07 18:30:05 发布

架构魔术

最新推荐文章于 2025-03-07 18:30:05 发布

阅读量3.8k

点赞数

文章标签： vue.js javascript 前端编程

本文链接：https://blog.csdn.net/2301_79331387/article/details/133107226

版权

编程专栏收录该内容

405 篇文章 ¥29.90 ¥99.00

订阅专栏

本文介绍了在Vue项目中遇到SVG不显示的问题时，如何进行排查和解决。包括检查SVG文件路径、使用require导入、创建Vue组件、利用Vue-Awesome插件以及检查CSS样式等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue是一种流行的JavaScript框架，用于构建用户界面。它提供了一种简单而强大的方式来处理数据和渲染视图。在Vue中，使用SVG（可缩放矢量图形）可以创建具有矢量图形的交互式界面。然而，有时候你可能会遇到SVG不显示的问题。本文将探讨一些可能的原因，并提供相应的解决方案。

检查SVG路径和文件

首先，确保你的SVG文件路径是正确的。在Vue中，通常将SVG文件放在assets目录下。另外，确保SVG文件本身没有任何错误。可以尝试手动打开SVG文件，以确保它没有损坏或包含错误的内容。

使用require导入SVG文件

在Vue中，可以使用require语法导入SVG文件。在需要使用SVG的组件中，可以使用以下代码导入SVG文件：

const mySvg = require('@/assets/mySvg.svg')

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

架构魔术

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

CSS中的SVG图像无法显示怎么办？

2301_79325657的博客

09-29

1304

当你在网页中使用CSS来控制SVG图像时，有时候可能会遇到SVG图像无法显示的问题。这个问题可能由多种原因引起，包括路径问题、样式问题或者浏览器兼容性问题。在使用CSS控制SVG图像时，确保你使用的CSS属性在目标浏览器上是支持的。确保你使用了正确的选择器，并且为SVG元素指定了正确的样式属性。有时候，SVG图像可能会被其他CSS样式所覆盖，导致它无法显示。确保你在CSS代码中正确指定了SVG图像的路径。如果问题仍然存在，请检查你的SVG图像文件是否有效，并确保代码中没有其他错误。

vue 不识别svg_vue配置svg 图标显示不出来

weixin_36012152的博客

02-11

1655

组件：props: {iconClass: {type: String,required: true},className: {type: String}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.class...

参与评论您还未登录，请先登录后发表或查看评论

vue配置svg，图标显示不出来

最新发布

weixin_43479100的博客

03-07

213

一次需求中，需要可以加载各格式的图，其中就包括在线svg格式的，开始使用<img src='' />标签进行加载，发现加载失败。4、 axios.post('svg图在线地址','参数').then(res=>{2、然后再使用正则进行修改宽高（也可以修改其它属性，写对应的正则就可）。'这里面可以对返回的该svg数据进行正则修改属性值'3、在模板中使用一个容器标签结合v-html解析加载svg的数据。1、使用axios进行网络请求获取到svg图的数据。***仅个人遇的问题就记录下，就记录一下下***

Vue中使用svg（图片不显示问题）

weixin_45732235的博客

04-01

7758

在vue项目中优雅的使用Svg 此处我的vue.config.js文件为 const path = require('path') function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = { productionSourceMap: false, lintOnSave:false, chainWebpack: config => { config.module.rul

vue配置svg 图标不显示

WangYiBo_的博客

11-26

2904

问题如图： 解决方案： npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D

vue中写svg组件svg图片加载不出来

Dilemma_me的博客

11-08

6542

vue中写svg组件svg图片加载不出来

Vue中使用导出来的svg icon时有的icon无法显示的问题

qq_41892833的博客

06-29

2942

Vue中使用导出来的svg icon时有的icon无法显示的问题正常显示如下图; 无法显示的图标如下图：解决方法：如下图所示，svg文件的路径替换成对应的http路径。

vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）

02-04

vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征：不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签支持SVG中的分组标签在Illustrator或素描中进行实时svg编辑通过...

Vue elementui字体图标显示问题解决方案

11-19

Vue ElementUI字体图标显示问题是一个常见的前端开发中遇到的困扰，尤其在集成ElementUI框架时。ElementUI使用了自定义的字体图标来呈现组件中的图形元素，这些图标以`.ttf`、`.woff`或`.woff2`等字体文件的形式存在...

微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

12-07

在本例中，开发者选择在Vue环境中利用SVG来解决这个问题。 1. 微信小程序的限制与解决方案：微信小程序中不能直接使用SVG作为图片资源，因此在实现星星评分组件时，需要将SVG转换为Base64编码。这样可以确保图片...

在线将SVG转换为Vue组件

08-12

在线将SVG转换为Vue组件

vue动态加载SVG文件并修改节点数据的操作代码

11-19

如果在加载SVG文件时遇到显示问题，可以检查浏览器的错误信息，对比成功和失败请求的响应差异，以及尝试将SVG转换为HTML来查看和分析可能的问题。总的来说，这个项目涉及到SVG动态加载、跨域问题的解决、事件监听...

Vue项目中svg图标不能正常显示

aei600024的博客

03-25

5370

1.安装 svg-sprite-loader npm install svg-sprite-loader --save-dev 2.配置build文件夹中的webpack.base.conf.js 3.在src/components下新建文件夹及文件SvgIcon/index.vue 4.在src下新建icons文件夹，及icons文件夹下svg文件夹、index.j...

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

qq_50497708的博客

10-14

3887

虽然图片可以加载出来，但是，这里写的是一个循环，如果不动态绑定，每个列表只能加载相同的这一个图片，也不满足需求（我想要每个列表拥有自己的小图标）svg是一个矢量图，不管放大还是缩小都不会影响到它的清晰度，它实际上是一个js的代码文件，相当于是一个静态的资源。但因为直接这样写导致渲染出来图片的位置并不理想，图片会加载在一级菜单的里面。总结：因为svg相当于是静态资源，在vite中需要import进行静态引入。这样引入，图片路径没有错误，但在页面无法加载出来。：使用import引入即可解决。

SVG图片显示不出来问题

qq_44847590的博客

01-05

2742

SVG图片代码中显示不出来

vue3+vite项目，动态svg build后，线上找不到图片问题

qq_41261490的博客

06-20

3859

好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置：模板使用上面这样使用，在本地都是找不到文件的。但是直接在模板中这样使用是可以的这是因为，把变量解析成了字符串，没有按路径去查找。模板使用上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。费了老半天劲，各种方式去试过，最后在vite文档中找到了答案； URL方式，不能使用模板

[svg-icon]引入vue项目后，use标签为0，已解决

花椒和蕊的博客

05-07

2030

备注：svg标签一般都是ui直接给，如果需要自己定义，新建text文档，将内容复制后，更改尾缀为.svg即可。use标签为0的主要原因是vue.config.js中没有配置对应的svg-sprite-loader。但是好记性不如烂笔头，这次重新遇到，又重新排查bug花了1个多小时。svg引入vue项目，需要依赖svg-sprite-loader。这个bug我之前遇到过一次，解决了也就没记录。在main.js中全局挂载。对应的index.js。对应的index.vue。

vue3 svg加载不显示

01-05

Vue3默认情况下不直接支持在模板中使用SVG图像。要在Vue3中显示SVG图像，你可以通过以下几种方法实现： 1. 使用Vue组件显示SVG：将SVG图像拷贝到Vue组件文件中，然后在模板中使用组件来显示SVG图像。 2. 使用`vue-svg-loader`加载器：安装`vue-svg-loader`依赖，并在webpack配置中使用该加载器来加载SVG图像。然后在模板中使用`<img>`标签来显示SVG图像。 3. 使用`vue-svg-icon`插件：安装`vue-svg-icon`插件，并在Vue应用中注册该插件。然后在模板中使用`<svg-icon>`标签来显示SVG图像。以下是使用`vue-svg-icon`插件的示例代码：首先，安装`vue-svg-icon`插件： ``` npm install vue-svg-icon ``` 然后，在Vue应用中注册该插件： ```js import Vue from 'vue'; import VueSvgIcon from 'vue-svg-icon'; Vue.use(VueSvgIcon); ``` 最后，在模板中使用`<svg-icon>`标签来显示SVG图像： ```html <template> <div> <svg-icon name="icon-name"></svg-icon> </div> </template> ``` 其中，`name`属性值为SVG图像文件的名称（不包含文件扩展名）。希望以上方法能帮助到你解决Vue3中SVG加载不显示的问题。如有疑问，请随时追问。