Как импортировать SVG в дочерний компонент класса в React? - PullRequest
Новая
       29

Как импортировать SVG в дочерний компонент класса в React?

2 голосов
/ 10 июня 2019

Я могу импортировать svg в родительский компонент App.js (в папке src), но не в дочерний компонент Home.js (src / components / Home.js)

Когда я импортируюнепосредственно в родительский компонент svg отображается отлично, но если я импортирую в дочерний компонент, он говорит:

Модуль не найден: не удается разрешить './img/BulbOn.svg' в 'E: \ Website Work \Текущая работа \ parsa_ventures \ src \ components '

   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 содержит все файлы

1 Ответ

0 голосов
/ 10 июня 2019

вы используете ./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
...