webpack打包图片输出时显示<img src="[object Object]">

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
<script type="text/javascript" src="bundle.js"></script>
</body>

</html>

main.js

var img1 = document.createElement("img");
img1.src = require("./01.jpg");
document.body.appendChild(img1);

webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
        ]
    }
};

输出后运行index.html,f12查看发现代码里面是:

<body>
<script type="text/javascript" src="bundle.js"></script>
<img src="[object Object]">


</body>
阅读 5.1k
3 个回答

file-loader 换个低版本的试试

新手上路,请多包涵

将file-loader,换成这个版本可行:

"file-loader": "^0.11.2"

很奇怪,都说图片用 url-loader,结果用这个。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进