我想导入和SVG标志作为一个组件,我得到了错误,如下面的截图所示。反应SVG渲染问题
打开SVG到网络浏览器,这呈现罚款如预期,但是当放入我的应用程序它不喜欢它出于某种原因。
我唯一注意到的是SVG的名称 - svg的实际名称是“test.svg”,但是,错误将其识别为“test.5d5d9eef.svg”。我不确定这个号码在哪里或如何生成。
另请注意,我的组件中的“SVG”代码是一个测试,看看它是否会渲染,并且渲染得很好。
这里是我的代码:
import React from 'react';
import MainLogo from '../../../assets/svg/logos/test.svg';
export default class Logo extends React.Component {
render() {
return (
<div className="logo-wrap col-xs-2">
<h1>Heading</h1>
<MainLogo />
<svg>
<circle cx={50} cy={50} r={10} fill="red" />
</svg>
</div>
)
}
}
SVG在React中不是自动可用的组件,它是SVG标签的集合。你是否试图在图像中使用它?我建议把所有的SVG标签放在一个单独的组件中,然后做你自己。 – Li357
@AndrewLi你的意思是将图像标签上的svg导入为“src”?我尝试过,并呈现。我猜这样做没有真正的问题吗?代码: – Filth
您需要将SVG转换为反应组件。 –