img打 webpack_webpack 打包js中的img路径问题

`

{

test: /\.js$/,

exclude: function(path) {

// 路径中含有 node_modules 的就不去解析。

// var isNpmModule = !!path.match(/node_modules/);

// return isNpmModule;

},

include: [

path.resolve(__dirname, "src/assets/js"),

],   // 只去解析运行目录下的 src 和 demo 文件夹

loader:'babel'

},

{test: /\.html$/, loader: "html" },

{

test: /\.(png|jpg)$/,

loader: 'file-loader',

query: {

/*

*  limit=10000 ： 10kb

*  图片大小小于10kb 采用内联的形式，否则输出图片

* */

limit: 10000,

name: 'img/[name]-[hash:8].[ext]'

}

},

我的loader是这么配置的  在html里的图片路径是没有问题

而实际开发中 可能会需要js动态替换路径的问题

这种情况是需要怎么配置呢  感觉我的做法似乎不对

有实际这种需求的 帮我解答下 不胜感激

`

https://webpack.github.io/doc…

最后我找到了这个答案 不知道这样的做法是不是主流

写成：

obj.src = require('../../../img/icon-qr.png');

试试吧

到时候用变量替换啊。 一般就是从接口获取JSON，然后得到图片路径和名称，把这个作为参数赋值给相应的变量。

又是动态的问题。之前有听说过，可以让webpack根据变量可能出现的值来打包可能会用到的图片，不过我没实践过。

如果可能用到的图片不多，比如说三四张这样，可以先用变量(require图片后得来的图片真实路径)存起来，然后再根据实际需要把变量填到

<img>

上。类似下面这样：

var imgs['A'] = require('./img/imgA.jpg');

var imgs['B'] = require('./img/imgB.jpg');

var imgs['C'] = require('./img/imgC.jpg');