如何将 SVG 导入 React 中基于类的子组件？答案

【问题标题】：How do I import an SVG to a class-based child-component in React?如何将 SVG 导入 React 中基于类的子组件？
【发布时间】：2019-10-24 16:04:24
【问题描述】：

我可以在父组件 App.js（在 src 文件夹中）中导入 svg，但不能在子组件 Home.js（src/components/Home.js）中导入 svg

当我直接导入父组件时，svg 显示完美，但如果我导入子组件，它会显示

找不到模块：无法解析“E:\Website Work\Current Work\parsa_ventures\src\components”中的“./img/BulbOn.svg”

   import './App.css'
   import Home from './components/Home'
   function App() {
     return (
        <div>
            <Home />
        </div>
    )
   }

   export default App

   import BulbOn from './img/BulbOn.svg'

   class Home extends React.Component {
     render() {
         return (
            <div>
                <img src={BulbOn} alt="text" />
            </div>
         )
     }
   }

   export default Home

我是新手，所以我想知道是否可以轻松地在子组件中导入 svg 而无需使用道具。

我的文件夹结构路径，

网站Work/Current Work/parsa_ventures/src/App.js（家长）
网站Work/Current Work parsa_ventures/src/components/Home.js（儿童）网站Work/Current Work/parsa_ventures/src/img/BulbOn.svg（图片）
我将反应样板放在 parsa_ventures 中，所以 src 包含所有文件

【问题讨论】：

您确定为该 SVG 文件提供了正确的路径吗？
我从字面上复制粘贴了路径。在父级中工作在相同的路径中不起作用在子级中
你能告诉我你的父组件和这个子组件的路径吗？
因为这会尝试在Work/Current Work/parsa_ventures/src/components/img/BulbOn.svg找到这个文件。
把父代码放到合适的地方

标签： reactjs image import parent-child

【解决方案1】：

您正在使用./img，这意味着E:\Website Work\Current Work\parsa_ventures\src\components\img\BulbOn.svg 应该存在。请检查您的路径，

你需要输入./../img/BulbOn.svg 应该可以工作。
试试下面的代码，

import BulbOn from './../img/BulbOn.svg'

   class Home extends React.Component {
     render() {
         return (
            <div>
                <img src={BulbOn} alt="text" />
            </div>
         )
     }
   }

   export default Home

【讨论】：

【解决方案2】：

从子组件检查您的路径，因为您似乎错过了一个文件夹，然后尝试。此外，您可以将 svg 图像从父组件传递到子组件。

import React from 'react';
import Logo from '../../logo.svg';

class Test extends React.Component {
    render() {
        return (
            <div>
                <img src={this.props.url} alt="text" />
            </div>
        )
    }
}

export default Test

在父组件中，将 svg 路径 url 传递给子组件 - 测试。

<Test url={Logo} />

【讨论】：