Asset URL Handling
By default, vue-loader
automatically processes your style and template files with css-loader and the Vue template compiler. In this compilation process, all asset URLs such as <img src="...">
, background: url(...)
and CSS @import
are resolved as module dependencies.
For example, url(./image.png)
will be translated into require('./image.png')
, and
<img src="../image.png">
will be compiled into:
createElement('img', { attrs: { src: require('../image.png') }})
Transform Rules
If the URL is an absolute path (e.g.
/images/foo.png
), it will be preserved as-is.If the URL starts with
.
, it's interpreted as a relative module request and resolved based on the folder structure on your file system.If the URL starts with
~
, anything after it is interpreted as a module request. This means you can even reference assets inside node modules:<img src="~some-npm-package/foo.png">
(13.7.0+) If the URL starts with
@
, it's also interpreted as a module request. This is useful if your webpack config has an alias for@
, which by default points to/src
in any project created byvue-cli
.
Related Loaders
Because .png
is not a JavaScript file, you will need to configure webpack to use file-loader or url-loader to handle them. The project scaffolded with vue-cli
has also configured this for you.
Why
The benefits of all this are:
file-loader
allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreover, this also means you can just place images next to your*.vue
files and use relative paths based on the folder structure instead of worrying about deployment URLs. With proper config, webpack will auto-rewrite the file paths into correct URLs in the bundled output.url-loader
allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back tofile-loader
.