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

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

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

Модуль не найден: не удается разрешить «./img/BulbOn.svg» в «E:\Website Work\Current 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 содержит все файлы

Вы уверены, что указываете правильный путь к этому файлу SVG?

— 10.06.2019 11:03

я буквально скопировал путь. работает в родительском не работает в дочернем точно такой же путь

— 10.06.2019 11:04

можете ли вы сказать мне пути вашего родительского компонента и этого дочернего компонента?

— 10.06.2019 11:05

так как это попытается найти этот файл в Work/Current Work/parsa_ventures/src/components/img/BulbOn.svg.

— 10.06.2019 11:06

поместите код родителя, где он работает

— 10.06.2019 11:09

Работа веб-сайта/Текущая работа/parsa_ventures/src/App.js (родительский) Работа веб-сайта/текущая работа parsa_ventures/src/components/Home.js (дочерний) Работа веб-сайта/текущая работа/parsa_ventures/src/img/BulbOn.svg (изображение ) я поместил шаблон реакции внутрь parsa_ventures, так что src содержит все файлы

— 10.06.2019 11:12

reactjs image import parent-child

10.06.2019 10:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

4 791

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

10.06.2019 11:13

Проверьте свой путь от дочернего компонента, так как кажется, что вы пропустили одну папку, а затем попробуйте. Кроме того, вы можете передать изображение 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

В родительском компоненте передайте URL-адрес пути svg дочернему компоненту — Test.