Webpack要求相对于当前模块的路径引入图片。

Question

我有两个文件：

• ./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的路径。

如何让webpack理解对于这个js文件，图像文件的路径与在浏览器中相同？

- Henrik

---

дҪ зңҹзҡ„йңҖиҰҒеңЁеӣҫеғҸж ҮзӯҫsrcеұһжҖ§дёӯдҪҝз”Ёrequire()еҗ—пјҹиҝҷдёҚжҳҜзңӢиө·жқҘеҫҲеҘҮжҖӘеҗ—пјҹ - Green

是的，如果你愿意的话，你也可以将<img 标签拆分为它自己的无状态组件。 - Henrik

Answer 1

关键是给webpack一个配置提示，让它知道基于什么路径:

使用:

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

告诉webpack不要使用相对路径。

- Henrik

---

祝福你。谢谢。 - denvaar