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/target/[hash].png 其中 hash 是一个 sha1 和.如果它给它路径/[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屋！