React组件中的内联SVG未显示
可能是由于以下几个原因导致的：
- SVG代码错误：检查SVG代码是否正确，包括标签是否正确闭合、属性是否正确设置等。可以使用在线SVG验证工具或者SVG编辑器来检查和修复SVG代码。
- CSS样式冲突：检查是否有CSS样式与SVG冲突，可能会导致SVG不显示。可以尝试在SVG组件上添加
style={{ zIndex: 9999 }}来提高其层级，确保它不会被其他元素覆盖。 - SVG尺寸问题：检查SVG的尺寸设置是否正确。如果SVG没有设置宽度和高度，或者设置为0，可能会导致SVG不显示。可以尝试在SVG组件上添加
width和height属性来指定尺寸。 - SVG文件路径问题：检查SVG文件的路径是否正确。如果SVG文件路径不正确或者SVG文件不存在，SVG将无法显示。确保SVG文件的路径正确，并且可以通过浏览器访问到该文件。
- React组件渲染问题：检查React组件是否正确渲染SVG。确保SVG组件被正确引入并且在组件的JSX中被正确使用。
如果以上方法都无法解决问题，可以尝试使用Chrome浏览器的开发者工具来检查元素和网络请求，查看是否有相关错误信息或者请求失败的情况。另外，也可以尝试搜索React社区或者相关论坛，看是否有其他开发者遇到类似问题并给出了解决方案。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr
相关·内容
2回答
我在React函数组件中有一个svg： );
}
如果正确导入并在另一个组件中使用，则不会显示任何内容。我在其他组件中有其他内联svg，它们工作得很好。
我尝试在Illustrat
浏览 9提问于2020-02-11得票数 1
回答已采纳
9回答
我想知道如何与webpack建立一个内置的svg？我使用webpack.config文件加载器正确地设置了我的。然而，这个例子显示了使用这样的背景图像： background-image: url(./logo.svg);它工作得很好，但是我希望有一个内联的svg映像--如何在我的react组件中包含我的
浏览 9提问于2015-12-13得票数 55
3回答
我的问题是：创建一个缩略图视图，在我的主要路线'/'上显示每个国家的国旗(149个数字)我在Express代码中设置了一个静态路由，因此所有标志都可用。= flags)
.catch(err => console.log('Err
浏览 1提问于2018-03-11得票数 3
回答已采纳
3回答
我正在处理一个问题，其中SVG图像需要从网址(亚马逊S3)加载到一个反应组件。我能够使用SVG-inline react组件从本地文件中成功地显示和加载图像。但是，svg文件需要从S3存储桶中内联加载，JS svg导入不支持URL。
因此，我正在努力寻找解决此问题的最佳替代方案？
浏览 0提问于2018-10-24得票数 6
在我的react应用程序中，我将svg作为React组件导入，如下所示： import React from "react";..../>
<&
浏览 14提问于2020-07-01得票数 0
这是我的部件。当我在JSX中使用SVG时，它呈现OK： import Radium from 'radium';
render () {将backgroundI
浏览 1提问于2019-06-04得票数 0
回答已采纳
1回答
我尝试在样式化的组件中创建SVG包装器，但这给了我一个svg > svg > path的巢，我不确定这是否正确。我想避免使用内联风格的情况下，具体问题以后。SVG图标代码<--使用，我将svg导出为默认的React组件
export { ReactComponent as default } from './
浏览 0提问于2019-08-01得票数 3
回答已采纳
2回答
我使用类型记录创建了一个使用create应用程序的项目，后者要求我向其添加next.js，结果是它在整个应用程序中插入了一些svg。，比如React组件：我最后犯了这个错误：
错误:元素类型无效您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入
浏览 12提问于2020-09-18得票数 7
有一个react应用程序需要在应用程序的某些部分以脱机模式显示图标。内联svg非常适合。' strokeWidth='1.2' strokeLinecap='round' strokeLinejoin='round'/>} 在图标的所有其他应用程序中，下一种方法使用的问题return <img src={iconB
浏览 26提问于2021-01-04得票数 1
我见过很多人都在讨论不起作用的事情。 return <Underconstruction />但它向我展示了这个错误：我还尝试使用它作为常规的图像标记
浏览 10提问于2022-10-19得票数 0
我有一个名为CircleSVG的SVG组件。稍后，我希望提取该组件的内容并将其存储为字符串。类似于const text = JSON.stringify(CircleSvg())的东西(尽管这不起作用)。import React from 'react';
export defa
浏览 0提问于2021-03-24得票数 0
我有一个icons.svg格式的svg文件，代码如下：<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.
浏览 0提问于2020-06-16得票数 0
我正在使用rollup捆绑一个react包，该包包含一个图标组件，该组件以名称作为支柱，并返回一个icon，该图标名由react组件包装。" json() }
这在Chrome中很好(虽然它可以内联href中的所有svg，我认为这就是这种方法的目的)，但在Safari中，它会触发
浏览 6提问于2021-09-06得票数 3
我在Quip平台(在React上运行)中工作，使用SLDS-React DataTableCell中的SLDS-React Datepicker组件，但无法在Datepicker中呈现任何SLDS图标(下面的代码片段(它是从SLDS生成的，应该呈现用于在月份之间导航的右箭头)似乎完全限制了SVG图标的显示。我已经将这些资产包含在我的构建中，并且可以使用下面包含<e
浏览 1提问于2020-10-10得票数 2
我使用字体-令人敬畏的svg图标，但我意识到它们可能会对我的网站的LCP产生重大影响，所以我试图替换它们。我进入我的html并复制svg代码，并将这些svg组件放入svg文件中。它们在我的photoshop仿制品中作为图片打开，所以我认为它们应该是好的。import FacebookIc
浏览 11提问于2020-08-21得票数 3
回答已采纳
我希望在html页面上呈现一个svg文件，并从javascript访问它的代码元素。我想更改特定元素的属性。具体来说，我想更改添加一个属性style="fill:#FFFFFF;“。稍后我要删除这个。我想使用元素的id属性访问元素。我试着用大量的javascript代码来实现这一点，并将svg呈现为一个img和一个对象，但是没有任何工作。这个是可能的吗？如果是的话，怎么做？提前谢谢。
浏览 2提问于2021-10-28得票数 1
回答已采纳
编译后的站点比我希望的(2.5gb)要大一些。当我研究如何降低总构建大小时，我在构建文件中看到了一些重复的元素，我认为这些元素可以被优化。import arrowWhite from "../../images/icons/right-arrow-white.svg";
<img src={arro
浏览 4提问于2022-02-02得票数 -1
回答已采纳
我试图在我的react组件中动态地获取SVG映像，但到目前为止，我得到的错误是未提及的TypeError:未能获取动态导入的模块。这是我的代码示例import React from 'react';
<
浏览 0提问于2020-04-28得票数 0
回答已采纳
我已经在下面发布了我的Webpack配置，用于生产环境。我试图在我的一个SCSS文件中使用background-image: url(../img/chevron-thin-right.svg);，但它被解析为background-image: url([object Module])，因此无法工作。我试图将一个纯粹的SCSS和HTML项目移植到一个由Webpack捆绑的react应用程序中，这样上面的方法就可以用了。任何修复都将不胜感激。[ext]
浏览 0提问于2018-10-27得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
