Different output for require() method after upgrading Vue Application-CodePudding

I've a Vue Application with webpack and old babel version. When I upgraded it to vue-cli and new @babel, it output unexpected result for images.

Following Code results different output:

require('./assets/logo.png')

Old Application (Required) Output:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c...

New Update Output:

/img/logo.82b9c7a5.png

I'm not sure, whether it is due to the vue-cli or @babel or any other dependencies. Please help me to figure out this problem. I've pushed basic boilerplate for these 2 applications in Git.

CodePudding user response：

Vue CLI 4 uses url-loader for image URLs (specifically for *.png,*.jpg,*.jpeg, *.gif, and *.webp). If an imported image is within a size limit, the image is inlined as a data URL. Otherwise, it's passed onto file-loader, which returns the resolved path URL to the file.

Vue CLI uses a fixed inline limit set at 4096 bytes for the url-loader. The logo in your example is 6849 bytes, which exceeds the inline limit, causing it be to loaded as a path URL.

You can change the inline limit with the following Vue CLI config file (needs to be created in your case):

// <projectRoot>/vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        options.limit = 8 * 1024 // 8KiB
        return options
      })
  },
}