ReactJSで新しくコンポーネントに画像をインポートしたい。これらの画像はパブリックフォルダ内にあり、反応コンポーネントからフォルダにアクセスする方法はわかりません。ReactJSとパブリックフォルダ内の画像
アイデア？
私はBottom.jsまたはHeader.js
構造のフォルダ内の画像をインポートしたい
EDITは次のとおりです。
私はWebPACKのを使用しないでください。したほうがいい ？
編集2
私は画像や資産の残りの部分をロードするためのWebPACKを使用したいです。私は、画像のパスと方法を追加する必要が
：だから、私のconfigフォルダに私は次のファイルがありますか？
おかげ
ザ・コンポーネントフォルダにコンポーネントを反応させるには、公開ディレクトリの概念を持っていません。その結果、'./images...'のようなものは動作しません。ボタンのコンポーネントではなく、次のようなインポートがあります。
import myImage from '../../public/images/logofooter.png'
これは静的リソースを反応コンポーネントにインポートするのに適した方法です。
<Button srcAsProp={myImage}/>
または単に：そして、あなたがそうのように、このインポートを利用することができます
<div><img src={myImage}/></div>
をあなたはあなたの人生を容易にするためのWebPACKここで使用する必要があります。お使いの設定でのルールの下に追加します。以下のような
import myImage from 'publicfolder/images/Image1.png'
使用MYIMAGE：
<div><img src={myImage}/></div>
場合、またはこの後
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]'
}
}
を、あなたの反応コンポーネントに画像を簡単にインポートすることができますイメージはコンポーネントのローカル状態にインポートされます
<div><img src={this.state.myImage}/></div>
リソースのインポートを行うためにwebpackが必要なのかどうかは疑問です。 – brandNew
@fshock、私はそれがタスクを達成することを容易にすると言いました。 – Umesh
@Umesh私はWebpackでそれをするのが好きです。だからあなたは設定にルールを追加する必要があると言ったが、どのファイル？私はpath.js、polyfills.js、webpack.config.dev.js、webpack.config.prod.js、webpackDevServer.config.jsを持っています。質問を編集して、皆さんが構造を見ることができるようにします。ありがとう – Aceconhielo
これのためにウェブパックの設定は必要ありません..
あなたのコンポーネントでは、単に画像パスを与えます。デフォルトでは、反応した人は公開ディレクトリにその名前を知っています。
<img src="/image.jpg">
このフォルダは何に公開されていますか？あなたのプロジェクトの構造は何ですか？ webpackに画像をバンドルしていますか、これは除外されていますか？ etc etc etcコンテキストコンテキスト –
@JoelHarkesが編集しました。 – Aceconhielo
は梱包されていないようです。しようとしました： 'src ="/images/logofooter.png "'？ –