ReactJS ve genel klasördeki görüntüler

ReactJS'de yeniyim ve görüntüleri bir bileşene aktarmak istiyorum. Bu görüntüler ortak klasörün içinde ve klasöre react bileşeninden nasıl erişeceğimi bilmiyorum.

Herhangi bir fikir ?

DÜZENLE

Bottom.js veya Header.js içine bir resim aktarmak istiyorum

Yapı klasörü:

Web paketi kullanmıyorum. Yapmalımıyım ?

Düzenle 2

Görüntüleri ve diğer varlıkları yüklemek için webpack kullanmak istiyorum. Yapılandırma klasörümde şu dosyalar var:

Görüntülerin yollarını nereye eklemem gerekiyor ve nasıl?

Teşekkürler

Kamusal alanda resimlere atıfta bulunmak için bunu nasıl doğrudan yapacağımı bildiğim iki yol var. Homam Bahrani'den biri yukarıdaki gibidir.

kullanma

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

Ve bu işe yaradığına göre gerçekten başka hiçbir şeye ihtiyacınız yok ama bu da işe yarıyor ...

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

Bunun için herhangi bir web paketi yapılandırmasına ihtiyacınız yok ..

Bileşeninizde sadece görüntü yolunu verin. Varsayılan olarak react, genel dizinde olduğunu bilecektir.

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

react belgeleri bunu belgelerde güzel bir şekilde açıklar process.env.PUBLIC_URL, ortak klasöre yerleştirilmiş görüntülerle kullanmanız gerekir . Daha fazla bilgi için buraya bakın

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

1- Yapılandırmalar için web paketi kullanıyorsanız iyidir, ancak görüntü yolunu kullanabilirsiniz ve tepki, bunun genel dizinde olduğunu öğrenecektir.

<img src="/image.jpg">

2- React'te standart bir uygulama olan webpack kullanmak istiyorsanız. Bu kuralları webpack.config.dev.js dosyanızda kullanabilirsiniz.

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

daha sonra görüntü dosyasını react bileşenlerine aktarabilir ve kullanabilirsiniz.

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

<img src={image}/>

React'in SPA olduğunu biliyoruz. JSX'ten uygun HTML'ye genişletilerek her şey kök bileşenden işlenir.

Bu yüzden resimleri nerede kullanmak istediğiniz önemli değil. En iyi uygulama, mutlak bir yol kullanmaktır (halka referansla). Göreli yollar konusunda endişelenmeyin.

Sizin durumunuzda, bu her yerde çalışmalıdır:

"./images/logofooter.png"

Hayatınızı kolaylaştırmak için buradaki web paketini kullanmalısınız. Yapılandırmanıza aşağıdaki kuralı ekleyin:

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

Bundan sonra, görüntüleri basitçe react bileşenlerinize aktarabilirsiniz:

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

MyImage'ı aşağıdaki gibi kullanın:

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

veya görüntü, bileşenin yerel durumuna aktarılmışsa

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

Bunu da kullanabilirsiniz .. "resminiz.jpg" nin ortak klasörünüzde olduğunu varsayarak çalışır.

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