SVG 不呈现 - React答案

【问题标题】：SVG does not render - ReactSVG 不呈现 - React
【发布时间】：2022-11-24 14:58:27
【问题描述】：

我一直在努力渲染一个 .svg 文件的徽标。我是这样导入的

import logo from '../../stylesheets/logo.svg';

当我用 img 标签渲染它时，这就是我得到的：

 <img src={logo} style={{width:'175px', height:'40px'}} />

当我用 object 或 svg 标签渲染它时，这就是我得到的

 <svg src={logo} style={{width:'175px', height:'40px'}} />

我不确定出了什么问题，但我尝试了一些我在网上看到的解决方案，比如将这一行添加到我的 svg 文件中，但没有用。

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

这是我的 svg 文件

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 250" style="enable-background:new 0 0 800 250;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#07A4AB;}
</style>
<g>
    <g>
        <path class="st0" d="M271.9,78.4c-0.9-0.9-2.5-2.1-4.9-3.6c-2.4-1.5-5.2-3-8.6-4.4c-3.4-1.4-7-2.7-10.9-3.6c-3.9-1-7.9-1.5-12-1.5
            c-7.2,0-12.6,1.4-16.1,4.1c-3.5,2.7-5.3,6.4-5.3,11.2c0,2.8,0.7,5.1,2,6.9c1.3,1.8,3.3,3.4,5.8,4.8c2.5,1.4,5.7,2.6,9.6,3.7
            c3.9,1.1,8.3,2.3,13.4,3.5c6.6,1.7,12.6,3.6,18,5.6c5.4,2,10,4.5,13.7,7.5c3.8,3,6.7,6.6,8.7,10.9c2,4.2,3.1,9.5,3.1,15.7
            c0,7.2-1.3,13.4-4,18.6c-2.7,5.1-6.3,9.3-11,12.5c-4.6,3.2-9.9,5.5-15.9,7c-6,1.5-12.3,2.3-18.9,2.3c-10.1,0.1-20.2-1.4-30.1-4.4
            c-9.9-3-18.8-7.2-26.7-12.8l11.5-22.7c1.1,1.1,3.2,2.6,6.2,4.4c3,1.8,6.5,3.6,10.6,5.5c4.1,1.8,8.6,3.3,13.5,4.6
            c4.9,1.2,10,1.8,15.2,1.8c14.4-0.1,21.6-4.7,21.6-14c0-2.9-0.9-5.4-2.5-7.4c-1.7-2-4-3.8-7.1-5.3c-3.1-1.5-6.7-2.9-11-4.1
            c-4.3-1.2-9.1-2.6-14.5-4.1c-6.5-1.7-12.1-3.6-16.9-5.7c-4.8-2.1-8.7-4.5-11.9-7.3c-3.2-2.8-5.6-6.1-7.2-9.8
            c-1.6-3.7-2.4-8.2-2.5-13.4c0-6.8,1.2-12.9,3.7-18.3c2.5-5.3,6-9.8,10.5-13.4c4.5-3.6,9.7-6.3,15.6-8.2c5.9-1.9,12.3-2.8,19.2-2.9
            c9.5-0.1,18.3,1.4,26.3,4.3c8,2.9,15,6.4,21,10.4L271.9,78.4z"/>
        .9-5.5,9.5C718.2,117.6,717.6,121.5,717.6,125.9z"/>
    </g>
    <g>
        <g>
          ....
        </g>
        <g>
            ....
        </g>
        <g>
            ....
        </g>
        <g>
          ....
        </g>
    </g>
</g>
</svg>

我错过了什么吗？有人可以把我推向正确的方向吗？谢谢你。

【问题讨论】：

<img src={syncrologo} style={{width:'175px', height:'40px'}} /> 这应该可以。检查您的导入是否正确或有错字
@NeERAJTK 路径是正确的。我在那个文件夹中添加了另一个图像（一个 png）并且我能够渲染它。
我发现我正在编辑我的答案出了什么问题。
您的 svg 代码有误。在路径之后，您有一些杂散的代码，最后有一个结束标记。可能不是这个问题，但请检查。

标签： reactjs svg

【解决方案1】：

import svg from './svg.svg';
<img src={svg} />

这是导入 svg 的方法，如果您需要进一步的帮助，请随时回复。

【讨论】：

对不起，这不是答案，我正确地渲染了它，路径是正确的，它只是显示了一个损坏的图像。
你有机会使用 Vite 吗？
不，我没有使用 vite
尝试将您的 svg 放在公用文件夹中，然后相对于公用文件夹导入。因此，如果您的 svg 在 /public/assets/your.svg 中，请从 '/assets/your.svg' 导入 svg； ..... 或者像 Dharmik 上面建议的那样，作为一个组成部分。

【解决方案2】：

你必须import它作为component。它不是图像，因此您不能将它放在img 标签中。

SVG 呈现为 component，因此您可以直接将其用作 component。

import { ReactComponent as Logo } from '../../stylesheets/logo.svg';

现在将其用作component

<Logo />

【讨论】：

对不起，这不是答案，我纠正了自己，它仍然没有呈现。
然后我认为您的导入中有错字，否则它应该可以工作。
没有类型，我在 svg 所在的同一个文件夹中添加了一个图像并且它正确呈现，如果我打开文件，我可以在浏览器上查看 svg 图像，但是如果我导入它就不起作用。
检查我的答案我编辑了它。
我试过了，它爆炸了 cannot import svg as a component react

【解决方案3】：

我最终将 xml 转换为反应组件，因为以上都不适合我。

const Logo = () => {
  return(
    <div className="image-container">
      <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 800 250" width="22vh">
        <g>
          <g>
            .........
          </g>
          <g>       
            <g>
             ..........
            </g>
          </g>
        </g>
      </svg>
    </div>
  )
};

【讨论】：

【解决方案4】：

我遇到了完全相同的问题，最后我不得不像下面那样将变量名大写，然后它就起作用了。

从“../../stylesheets/logo.svg”导入徽标；

【讨论】：