Question

我能够将svg导入父组件App.js（位于src文件夹中），但不能导入子组件Home.js（src / components / Home.js）

当我直接导入到父组件时，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（图片）
我将react样板放入parsa_ventures中，以便src包含所有文件的地方

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

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

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

2 个答案: