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

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

какие идеи ?

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

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

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

enter image description here

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

изменить 2

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

enter image description here

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

спасибо

5 ответов


для этого вам не нужна конфигурация webpack..

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

<img src="/image.jpg">

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

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

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

<Button srcAsProp={myImage}/>

или просто:

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

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

после этого вы можете просто импортировать изображения в компоненты react:

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

используйте myImage, как показано ниже:

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

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

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

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

<img src="/image.jpg">

2-Если вы хотите использовать webpack, который является стандартной практикой в React. Вы можете использовать эти правила в своей webpack.конфиг.разработка.файл 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}/>

we know react is SPA. Everything is rendered from the root component by 
expanding to appropriate Html from JSX.

So, It does not matter where you want to use the images, best practise is to 
use absolute Path ( with reference to public ), do not worry about Relative 
Paths.

In your case, this should work everywhere ->

"./images/logofooter.png"