ReactJS и изображения в общей папке

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

Есть идеи?

РЕДАКТИРОВАТЬ

Я хочу импортировать изображение внутри Bottom.js или Header.js

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

Я не использую веб-пакет. Нужно ли мне?

Редактировать 2

Я хочу использовать веб-пакет для загрузки изображений и остальных ресурсов. Итак, в моей папке конфигурации у меня есть следующие файлы:

Где мне нужно добавить пути к изображениям и как?

Спасибо

Ответ 1

Для этого вам не нужна настройка webpack.

В вашем компоненте просто укажите путь изображения. По умолчанию реакция будет знать его в общедоступном каталоге.

<img src="/image.jpg">

Ответ 2

Реактивные компоненты в папке компонентов не имеют понятия общего каталога. В результате что-то вроде './images...' не будет работать. Скорее в вашем компоненте кнопки есть импорт следующим образом:

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

Это предпочтительный способ импорта статических ресурсов в реагирующий компонент. И вы можете использовать этот импорт так:

<Button srcAsProp={myImage}/>

или просто:

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

Ответ 3

Здесь вы должны использовать webpack, чтобы сделать вашу жизнь проще. Добавьте правило ниже в свой конфиг:

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>

Ответ 4

1- Хорошо, если вы используете webpack для конфигураций, но вы можете просто использовать путь к изображению и реагировать, и вы обнаружите, что это в общедоступном каталоге.

<img src="/image.jpg">

2- Если вы хотите использовать веб-пакет, который является стандартной практикой в 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}/>

Ответ 5

Мы знаем, что React - это SPA. Все визуализируется из корневого компонента путем расширения до соответствующего HTML из JSX.

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

В вашем случае это должно работать везде:

"./images/logofooter.png"

Ответ 6

Документы по реагированию хорошо объясняют это в документации, вы должны использовать process.env.PUBLIC_URL с изображениями, размещенными в общей папке. Смотрите здесь для получения дополнительной информации

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