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

最新推荐文章于 2024-06-01 18:42:13 发布
最新推荐文章于 2024-06-01 18:42:13 发布
阅读量3k 收藏
点赞数
文章标签： vue.js javascript 前端 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79331387/article/details/133107226
版权
编程 专栏收录该内容
405 篇文章 43 订阅 ¥29.90 ¥99.00
订阅专栏
本文介绍了在Vue项目中遇到SVG不显示的问题时，如何进行排查和解决。包括检查SVG文件路径、使用require导入、创建Vue组件、利用Vue-Awesome插件以及检查CSS样式等方法。
摘要由CSDN通过智能技术生成

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

  1. 检查SVG路径和文件

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

  1. 使用require导入SVG文件

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

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

确保路径正确，并将@符号指向src目录。

  1. 使用Vue组件导入SVG

Vue也提供了一种使用Vue组件导入SVG的方法。首先，创建一个

了解本专栏 订阅专栏 解锁全文
架构魔术
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征： 不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时svg编辑 通过...
Vue中使用svg（图片不显示问题）
weixin_45732235的博客
04-01 7389
在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_vue配置svg 图标显示不出来
weixin_36012152的博客
02-11 1545
组件：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图像
最新发布
PleaseBeStrong的博客
06-01 2525
SVG（可缩放矢量图形）是一种图像格式，它以XML文档的形式存在，用以描述图像中的形状、线条、文本和颜色等元素。大设网（原AI大作）是基于Stable Diffusion的免费ai绘画网站，为ai作画爱好者提供一键生成高清精绘大图、sdxl模型保姆级教程、AI提示词工具。在开发过程中，可以考虑先生成图片（png或者jpg等格式）然后再将其转换为svg，这里推荐个我最近使用的转换网站，对于新用户有免费的转换点可以转换至少10次，当然有更好的网站可以分享到评论区。大设- AI智能绘画平台|设计师创意绘画工具。
vue3+vite项目，动态svg build后，线上找不到图片问题
qq_41261490的博客
06-20 3430
好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置： 模板使用 上面这样使用，在本地都是找不到文件的。 但是直接在模板中这样使用是可以的 这是因为，把变量解析成了字符串，没有按路径去查找。 模板使用 上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。 费了老半天劲，各种方式去试过，最后在vite文档中找到了答案； URL方式，不能使用模板
SVG图片显示不出来问题
qq_44847590的博客
01-05 2409
SVG图片代码中显示不出来
vue中写svg组件svg图片加载不出来
Dilemma_me的博客
11-08 6216
vue中写svg组件svg图片加载不出来
初学前端-记使用阿里图库SVG图标不显示的解决方法
zxc1207893278的博客
08-23 1624
使用VUE3+Element-Plus做来制作前端界面，做到左侧菜单栏时遇到了一个困难，添加的SVG图标始终不显示，位置存在，图标的信息也没有问题，但是就是一直显示不出来。的提示在Main.js中导入了inonfont.js文件后正常显示import './assets/fonts/iconfont/iconfont.js'的错误，但是不理解，不知从何下手。原来都是做上位机程序的第一次接触前端这种，感觉着实有些吃力，还有继续努力呀。其实在调试时浏览器中也报了。
vue配置svg，图标显示不出来
热门推荐
qq_35119405的博客
05-14 2万+
在vue中配置处理svg文件，结果图标显示不出来也不报错 正常的应该如下图，shadow-root下面还有dom节点： 根据网上的步骤 https://www.cnblogs.com/luoxuemei/p/12154835.html 重新检查配置的步骤，发现没有问题 解决： 如果碰到这个问题，直接把关于svg这段的配置全部删掉 如果问题依旧，浏览器也不会报错，则可以确定是整个vue.config.js文件没有生效，检查配置前的代码是否有问题造成了堵塞（代码往后执行不下去） 本人
vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg
qq1114565087的博客
06-22 4231
注意： 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的) 还有就是可能是创建的icons不在src根目录（2.x最开始我尝试在assets中创建文件来装svg图标，但是并没有显示，换到根目录就正常了,具体应该是那里还是有点问题，3.0正常，按道理讲应该是放到assets中也是可以的以后空了研究暂时这样
Vue elementui字体图标显示问题解决方案
11-19
Vue ElementUI字体图标显示问题是一个常见的前端开发中遇到的困扰，尤其在集成ElementUI框架时。ElementUI使用了自定义的字体图标来呈现组件中的图形元素，这些图标以`.ttf`、`.woff`或`.woff2`等字体文件的形式存在...
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
12-07
在本例中，开发者选择在Vue环境中利用SVG来解决这个问题。 1. 微信小程序的限制与解决方案： 微信小程序中不能直接使用SVG作为图片资源，因此在实现星星评分组件时，需要将SVG转换为Base64编码。这样可以确保图片...
vue动态加载SVG文件并修改节点数据的操作代码
11-19
如果在加载SVG文件时遇到显示问题，可以检查浏览器的错误信息，对比成功和失败请求的响应差异，以及尝试将SVG转换为HTML来查看和分析可能的问题。 总的来说，这个项目涉及到SVG动态加载、跨域问题的解决、事件监听...
【Vue2项目debug】——动态引入svg图片不生效
qq_50497708的博客
10-14 3565
虽然图片可以加载出来，但是，这里写的是一个循环，如果不动态绑定，每个列表只能加载相同的这一个图片，也不满足需求（我想要每个列表拥有自己的小图标）svg是一个矢量图，不管放大还是缩小都不会影响到它的清晰度，它实际上是一个js的代码文件，相当于是一个静态的资源。但因为直接这样写导致渲染出来图片的位置并不理想，图片会加载在一级菜单的里面。总结：因为svg相当于是静态资源，在vite中需要import进行静态引入。这样引入，图片路径没有错误，但在页面无法加载出来。：使用import引入即可解决。
svg模糊或不显示问题
weixin_45240168的博客
04-17 7333
问题简述 １．项目中使用的ｓｖｇ在苹果手机移动端，微信内置链接打开显示模糊。 ２.　经过查找资料，可以使用＜ｏｂｊｅｃｔ＞标签来嵌套ｓｖｇ可以解决ｓｖｇ模糊问题。 ３.　使用＜ｏｂｊｅｃｔ＞标签引发的问题，部分ｓｖｇ失去了点击事件的功能，经查证，不能点击的ｓｖｇ是因为在＜ｏｂｊｅｃｔ＞标签内的点击事件失效，把点击事件添加到父级元素即可。 ４.　经过一天时间，大量的ｓｖｇ不显示，原因是＜ｏｂｊｅｃｔ＞标签存在浏览器兼容问题，在手机其他浏览器中均可正常显示，但是使用微信内置的浏览器打开ｓｖｇ就不显示。 问题分析
vue配置svg 图标不显示
WangYiBo_的博客
11-26 2769
问题如图： 解决方案： npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D
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加载不显示的问题。如有疑问，请随时追问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值