ReactJS dan gambar di folder publik

Saya baru di ReactJS dan saya ingin mengimpor gambar dalam sebuah komponen. Gambar-gambar ini ada di dalam folder publik dan saya tidak tahu cara mengakses folder dari komponen react.

Ada ide?

EDIT

Saya ingin mengimpor gambar di dalam Bottom.js atau Header.js

Folder strukturnya adalah:

Saya tidak menggunakan webpack. Haruskah saya ?

Edit 2

Saya ingin menggunakan webpack untuk memuat gambar dan aset lainnya. Jadi di folder konfigurasi saya, saya memiliki file berikutnya:

Di mana saya perlu menambahkan jalur gambar dan bagaimana?

Terima kasih

Untuk mereferensikan gambar di depan umum, ada dua cara yang saya tahu bagaimana melakukannya secara langsung. Salah satunya seperti di atas dari Homam Bahrani.

menggunakan

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

Dan karena ini berhasil, Anda benar-benar tidak memerlukan apa pun selain itu, ini juga berfungsi ...

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

Anda tidak memerlukan konfigurasi webpack untuk ini ..

Dalam komponen Anda berikan saja jalur gambar. Secara default react akan tahu itu di direktori publik.

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

Dokumen react menjelaskan hal ini dengan baik dalam dokumentasi, Anda harus menggunakan process.env.PUBLIC_URLgambar yang ditempatkan di folder publik. Lihat di sini untuk info lebih lanjut

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

1- Baik jika Anda menggunakan webpack untuk konfigurasi tetapi Anda cukup menggunakan jalur gambar dan bereaksi akan mengetahui bahwa itu ada di direktori publik.

<img src="/image.jpg">

2- Jika Anda ingin menggunakan webpack yang merupakan praktik standar di React. Anda dapat menggunakan aturan ini di file webpack.config.dev.js Anda.

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

kemudian Anda dapat mengimpor file gambar dalam komponen react dan menggunakannya.

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

<img src={image}/>

Kami tahu React is SPA. Semuanya dirender dari komponen root dengan memperluas ke HTML yang sesuai dari JSX.

Jadi tidak masalah di mana Anda ingin menggunakan gambar. Praktik terbaik adalah menggunakan jalur absolut (dengan mengacu pada publik). Jangan khawatir tentang jalur relatif.

Dalam kasus Anda, ini seharusnya berfungsi di mana saja:

"./images/logofooter.png"

Anda harus menggunakan webpack di sini untuk membuat hidup Anda lebih mudah. Tambahkan aturan di bawah ini di konfigurasi Anda:

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

Setelah ini, Anda cukup mengimpor gambar ke dalam komponen react Anda:

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

Gunakan myImage seperti di bawah ini:

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

atau jika gambar diimpor ke kondisi lokal komponen

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

Anda juga bisa menggunakan ini .. ini berfungsi dengan asumsi 'gambaranda.jpg' ada di folder publik Anda.

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