ReactJS i obrazy w folderze publicznym

Jestem nowy w ReactJS i chcę importować obrazy w komponencie. Te obrazy znajdują się w folderze publicznym i nie wiem, jak uzyskać dostęp do folderu z komponentu reagowania.

Jakieś pomysły ?

EDYTOWAĆ

Chcę zaimportować obraz do pliku Bottom.js lub Header.js

Folder struktury to:

Nie używam webpacka. Czy powinienem ?

Edytuj 2

Chcę używać pakietu internetowego do ładowania obrazów i pozostałych zasobów. Więc w moim folderze konfiguracyjnym mam następne pliki:

Gdzie muszę dodać ścieżki obrazów i jak?

Dzięki

Aby odnieść się do obrazów w miejscach publicznych, wiem, jak to zrobić na dwa sposoby. Jeden jak wyżej od Homama Bahrani.

za pomocą

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

A ponieważ to działa, naprawdę nie potrzebujesz niczego innego, ale działa również ...

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

Nie potrzebujesz do tego żadnej konfiguracji pakietu internetowego.

W swoim komponencie po prostu podaj ścieżkę obrazu. Domyślnie zareaguje, będzie wiedział, że jest w katalogu publicznym.

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

React docs ładnie to wyjaśniają w dokumentacji, musisz używać process.env.PUBLIC_URLz obrazami umieszczonymi w folderze publicznym. Więcej informacji znajdziesz tutaj

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

1- Dobrze, jeśli używasz webpacka do konfiguracji, ale możesz po prostu użyć ścieżki obrazu i zareagujesz, że dowiesz się, że jest w katalogu publicznym.

<img src="/image.jpg">

2- Jeśli chcesz używać webpacka, co jest standardową praktyką w React. Możesz użyć tych reguł w swoim pliku webpack.config.dev.js.

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

następnie możesz zaimportować plik obrazu w komponentach React i używać go.

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

<img src={image}/>

Wiemy, że React to SPA. Wszystko jest renderowane z komponentu głównego poprzez rozwinięcie do odpowiedniego kodu HTML z JSX.

Nie ma więc znaczenia, gdzie chcesz używać obrazów. Najlepszą praktyką jest użycie ścieżki bezwzględnej (w odniesieniu do publicznej). Nie martw się o ścieżki względne.

W twoim przypadku powinno to działać wszędzie:

"./images/logofooter.png"

Powinieneś użyć tutaj pakietu webpack, aby ułatwić sobie życie. Dodaj poniższą regułę do swojej konfiguracji:

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

Następnie możesz po prostu zaimportować obrazy do komponentów React:

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

Użyj myImage jak poniżej:

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

lub jeśli obraz jest importowany do lokalnego stanu komponentu

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

Możesz również użyć tego ... to działa, zakładając, że „yourimage.jpg” znajduje się w folderze publicznym.

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