Version

"url-loader": "^3.0.0", "vue-loader": "^15.7.2",

Steps to reproduce

在搭建的vue项目中：

img src="./assets/jinnang.png" become img src="[object Module]"

What is expected?

src="base64 image"

What is actually happening?

src="[object Module]"

Img tag in template will be compiled into: {attrs:{"src":webpack_require(/*! ./assets/jinnang.png */ "./src/assets/jinnang.png"),"alt":""}}

The reult of webpack_require(....) is Object Module ,so it go wrong. Is it right?

Url in css will be compiled into getUrl(webpack_require(/*! ./assets/jinnang.png */ "./src/assets/jinnang.png"),that go well.

image

image

Workaround: set the esModule option in url-loader to false.

It's because in @vue/component-compiler-utils we transformed the asset urls to require statements, which expect CommonJS modules, while the recent major release of url-loader emits ES modules by default.

issue: https://github.com/vuejs/vue-loader/issues/1612#thread-subscription-status

Vue-loader中的 transformAssetUrls 选项：

在模板编译过程中，编译器可以将某些特性转换为 require 调用，例如 src 中的 URL。因此这些目标资源可以被 webpack 处理。例如 <img src="./foo.png"> 会找到你文件系统中的 ./foo.png 并将其作为一个依赖包含在你的包里。

image

使用 file-loader 时也会出现上述同样情况，file-loader 提供了一个esModule 选项，Type: Boolean Default: true

By default, file-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.
You can enable a CommonJS module syntax using:
webpack.config.js
module.exports = {
module: {
rules: [ {
test: /.css$/,
use: [ {
loader: 'url-loader',
options: { esModule: false, },
}, ],
}, ],
},
};