ReactJSとパブリックフォルダー内の画像

ReactJSの新機能で、コンポーネントに画像をインポートしたいと思います。これらの画像はパブリックフォルダー内にあり、reactコンポーネントからフォルダーにアクセスする方法がわかりません。

何か案は ？

編集

Bottom.jsまたはHeader.js内に画像をインポートしたい

構造フォルダーは次のとおりです。

私はwebpackを使用していません。したほうがいい ？

編集2

画像やその他のアセットの読み込みにwebpackを使用したいと思います。したがって、configフォルダーには次のファイルがあります。

画像のパスを追加する必要がある場所と方法は？

ありがとう

公共の場で画像を参照するには、2つの方法があります。1つはHomamBahraniの上記のようなものです。

を使用して

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

そして、これは機能するので、他に何も必要ありませんが、これも機能します...

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

このためにwebpack構成は必要ありません。

コンポーネントで、画像パスを指定するだけです。デフォルトでは、reactはパブリックディレクトリにあることを認識します。

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

反応ドキュメントはこれをドキュメントでうまく説明していprocess.env.PUBLIC_URLます。パブリックフォルダに配置された画像で使用する必要があります。詳細については、こちらをご覧ください

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

1-構成にwebpackを使用するのは良いことですが、イメージパスを使用するだけで、reactはそれがパブリックディレクトリにあることを検出します。

<img src="/image.jpg">

2-Reactの標準的な方法であるwebpackを使用したい場合。これらのルールは、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}/>

あなたはあなたの人生を楽にするためにここで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> 

ReactはSPAです。JSXから適切なHTMLに展開することにより、すべてがルートコンポーネントからレンダリングされます。

したがって、画像をどこで使用するかは問題ではありません。ベストプラクティスは、絶対パスを使用することです（パブリックを参照）。相対パスについて心配する必要はありません。

あなたの場合、これはどこでも機能するはずです：

"./images/logofooter.png"

これを使用することもできます。「yourimage.jpg」がパブリックフォルダにあると想定して機能します。

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