如何在React的基于类的子组件中导入SVG？

Question

我可以在父组件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

我新接触 React，想知道是否可以在子组件中轻松导入 SVG 而无需使用 props。

我的文件夹结构路径如下：

网站 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 文件夹中。

- Parsa

---

你确定你给了正确的路径到那个SVG文件吗？ - Ashish Patel

我只是复制粘贴了路径。在父级中可以工作，在子级中却不能，路径完全相同。 - Parsa

你能告诉我你的父组件和这个子组件的路径吗？ - Ashish Patel

这将尝试在Work/Current Work/parsa_ventures/src/components/img/BulbOn.svg中查找此文件。 - Ashish Patel

将父级代码放在它起作用的地方。 - Ashish Kamble

网站工作/当前工作/parsa_ventures/src/App.js（父级） 网站工作/当前工作/parsa_ventures/src/components/Home.js（子级） 网站工作/当前工作/parsa_ventures/src/img/BulbOn.svg（图像）我将React样板放在parsa_ventures中，因此其中包含所有文件的src。 - Parsa

Answer 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

- Ashish Kamble

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

- Krina Soni