web-dev-qa-db-ja.com

webpackには相対画像が必要です

2つのファイルがあります。

  • ./img/mypic.png
  • ./js/help/targets/target.js

Target.jsで：

<img src={require("../../../img/target.png")} />

Webpack.config.jsの場合：

 14   module: {
 15     loaders: [
 16       { test: /\.js$/, loader: 'jsx-loader?harmony' },
 17       { test: /\.css$/, loader: 'style-loader!css-loader' },
 18       { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },

画像を./[hash].pngにコンパイルします。

今、私はreact-routerを使用しているので、/help/targets/targetにいるので、webpackは画像にこのパス/help/targets/[hash].pngを与えています。ハッシュはsha1の合計です。パス/[hash].pngが与えられた場合、私は好むでしょう。ただ

このjsファイルの場合、ブラウザと同じように画像へのファイルパスが相対的であることをwebpackに理解させるにはどうすればよいですか？

javascriptwebpackimage-loadingurlloader
21
Henrik

その秘Theは、webpackにそのパスの基礎となる設定ヒントを与えることです：

使用する：

"output": { "publicPath": "/" }

Webpackが相対的でないことを伝えるため。

19
Henrik