webpack需要相对图像 [英] webpack require relative image

问题描述

我有两个文件：

• ./ img / mypic.png


• ./ js / help / targets / target.js

在target.js中：

In target.js:

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

使用webpack.config.js：

With 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 其中hash是sha1 sum。我更喜欢它给它路径 / [hash] .png 。只需

Now, I use react-router, so I'm at /help/targets/target and webpack is giving the image this path /help/targets/[hash].png where hash is a sha1 sum. I would prefer if it gave it the path /[hash].png. Just

如何让webpack了解这个js文件，图像的文件路径是否与浏览器相同？

How do I make webpack understand that for this js file, the file path to the image is relative in the same way as in the browser?

推荐答案

诀窍是给webpack一个关于路径依据的配置提示：

The trick is to give webpack a config-hint on what to base its paths on:

使用：

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

告诉webpack不要是亲戚。

To tell webpack not to be relative.

这篇关于webpack需要相对图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！