url-loader
Advanced tools
Package description
The url-loader npm package is used within web development environments to encode files as Base64 URLs and include them inline in the code. It is often used with webpack to handle images, fonts, and other file types within JavaScript and CSS files. When the file size is below a specified limit, url-loader will transform the file into a Data URL; otherwise, it falls back to file-loader, which handles larger files by emitting them to a separate file and returns the file URL.
Encode files as Data URLs
This webpack configuration uses url-loader to process image files. If an image is smaller than 8KB, it will be converted to a Base64 encoded Data URL and inlined in the code. Larger images will be handled by file-loader, which is the default fallback.
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};Fallback to file-loader
In this example, url-loader is configured with a fallback option. If the file size exceeds the limit, file-loader is used to emit the file to the output directory and returns the public URL. The 'name' option specifies the naming convention for the emitted files.
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
fallback: 'file-loader',
name: '[path][name].[ext]'
}
}
]
}
]
}
};file-loader resolves import/require() on a file into a url and emits the file into the output directory. It is similar to url-loader but does not convert files to Data URLs. It is often used as a fallback for url-loader when files exceed the specified limit.
raw-loader loads files as a string and is similar to url-loader in the sense that it allows the inclusion of file contents inline in the code. However, it does not encode the files to Base64, nor does it have a fallback mechanism like url-loader.
svg-url-loader is designed specifically for SVG files. It encodes SVGs into compact Data URLs, similar to what url-loader does for general files. It has optimizations for SVGs, such as removing unnecessary whitespace, newlines, and comments, which url-loader does not perform by default.
Changelog
Readme
Loads files as `base64` encoded URL
npm install --save-dev url-loader
The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.
import img from './image.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader'
options: {
limit: 8192
}
}
]
}
]
}
}
| Name | Type | Default | Description |
|---|---|---|---|
limit | {Number} | undefined | Byte limit to inline files as Data URL |
mimetype | {String} | extname | Specify MIME type for the file (Otherwise it's inferred from the file extension) |
prefix | {String} | false | Parameters for the file-loader are valid too. They are passed to the file-loader if used |
limitIf the file is greater than the limit (in bytes) the file-loader is used and all query parameters are passed to it.
The limit can be specified via loader options and defaults to no limit.
webpack.config.js
{
loader: 'url-loader',
options: {
limit: 8192
}
}
mimetypeSet the MIME type for the file. If unspecified the file extensions will be used to lookup the MIME type.
webpack.config.js
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
prefix{
loader: 'url-loader',
options: {
prefix: 'img'
}
}
Juho Vepsäläinen |
Joshua Wiens |
Artem Sapegin |
Michael Ciniawsky |
Alexander Krasnoyarov |
FAQs
A loader for webpack which transforms files into base64 URIs
The npm package url-loader receives a total of 5,072,665 weekly downloads. As such, url-loader popularity was classified as popular.
We found that url-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.