使用webpack4构建的项目,出现 src="[object Module]" 的原因及解决方案。
Vue官方文档中说了vue-loader的基本原理,他会将Vue模板中的 转为下面这段JS代码:
createElement('img', {
attrs: {
src: require('../image.png') // require()是CommonJS模块语法
}
})
对于图像我们在Webpack中一般使用 url-loader 来处理
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1024
}
}
然而这样最后生成的图像会变成 ,无法显示。
这是因为file-loader默认采用ES模块语法,即 import '../image.png';然而Vue生成的是CommonJS模块语法,即 require('../image.png');二者不一致。要么让file-loader或url-loader采用CommonJS语法,要么让Vue采用ES语法。
刚好file-loader或url-loader有一个esModule选项能调整,将其设置为false即可:
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1024,
esModule: false
}
}