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

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

Любые идеи ?

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

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

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

Я не использую webpack. Нужно ли мне ?

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

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

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

Благодарность

Чтобы ссылаться на изображения публично, я знаю два способа сделать это прямо. Один подобен приведенному выше из Хомама Бахрани.

с помощью

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

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

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

Для этого вам не нужна никакая конфигурация веб-пакета ..

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

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

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

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

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

<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
          }
        }
      ]
    }
  ],
},

затем вы можете импортировать файл изображения в компоненты React и использовать его.

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

<img src={image}/>

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

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

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

"./images/logofooter.png"

Вы должны использовать здесь 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> 

Вы также можете использовать это ... он работает, если "yourimage.jpg" находится в вашей общей папке.

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