1π
β
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
})
},
}
π€tony19
3π
Vue CLI 5 does not use url-loader
and file-loader
You need to use this code:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.set('parser', {
dataUrlCondition: {
maxSize: 8 * 1024 // 8KiB
}
})
}
}
PS: set maxSize
to -1
if you want to store the files instead of their hashes
Source:stackexchange.com