ReactJS та зображення у загальній папці

Я новий у ReactJS, і я хочу імпортувати зображення в компонент. Ці зображення знаходяться всередині загальної папки, і я не знаю, як отримати доступ до папки з компонента response.

Будь-які ідеї?

РЕДАГУВАТИ

Я хочу імпортувати зображення всередині Bottom.js або Header.js

Папка структури:

Я не використовую webpack. Чи я повинен ?

Редагувати 2

Я хочу використовувати webpack для завантаження зображень та решти ресурсів. Отже, у моїй конфігураційній папці у мене є наступні файли:

Де потрібно додати шляхи до зображень і як?

Дякую

Щоб зробити посилання на зображення в громадських місцях, я знаю, як це зробити прямо вперед. Один - як у Гомама Бахрані.

використання

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

І оскільки це працює, то вам справді нічого іншого не потрібно, але, це теж працює ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Для цього вам не потрібна будь-яка конфігурація веб-пакета ..

У вашому компоненті просто вкажіть шлях до зображення. За замовчуванням реакція буде знати її у відкритому каталозі.

<img src="/image.jpg" alt="image" />

Документи для реакції це добре пояснюють у документації, ви повинні використовувати process.env.PUBLIC_URLіз зображеннями, розміщеними у загальній папці. Дивіться тут для отримання додаткової інформації

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- Добре, якщо ви використовуєте webpack для конфігурацій, але ви можете просто використати шлях до зображення і реагуватимете, з’ясуєте, що він знаходиться у загальнодоступному каталозі.

<img src="/image.jpg">

2- Якщо ви хочете використовувати webpack, що є стандартною практикою в React. Ви можете використовувати ці правила у своєму файлі webpack.config.dev.js.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

тоді ви можете імпортувати файл зображення в компоненти реакції та використовувати його.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Ми знаємо, що React - це SPA. Все відображається з кореневого компонента шляхом розгортання до відповідного HTML з JSX.

Тому не має значення, де ви хочете використовувати зображення. Найкраща практика - використовувати абсолютний шлях (з посиланням на загальнодоступний). Не турбуйтеся про відносні шляхи.

У вашому випадку це повинно працювати скрізь:

"./images/logofooter.png"

Вам слід використовувати веб-пакет тут, щоб полегшити своє життя. Додайте в конфігурацію правило нижче:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

Після цього ви можете просто імпортувати зображення у свої реакційні компоненти:

import myImage from 'publicfolder/images/Image1.png'

Використовуйте myImage, як показано нижче:

<div><img src={myImage}/></div>

або якщо зображення імпортовано в локальний стан компонента

<div><img src={this.state.myImage}/></div> 

Ви також можете використовувати це .. це працює, припускаючи, що 'yourimage.jpg' знаходиться у вашій загальній папці.

<img src={'./yourimage.jpg'}/>