如何将 SVG 导入到 React 中基于类的子组件

Question

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

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

找不到模块：无法解析"E：\网站工作\当前工作\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(图片仅供参考(
我把 react 样板放在parsa_ventures里面，所以这就是 src 包含所有文件的地方

Answer 1

你正在使用./img这意味着E:Website WorkCurrent Workparsa_venturessrccomponentsimgBulbOn.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

Answer 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} />