[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![chat][chat]][chat-url] [![size][size]][size-url]
A loader for webpack which transforms files into base64 URIs.
This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
To begin, you'll need to install url-loader
:
$ npm install url-loader --save-dev
url-loader
works like 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)$/i, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } }
And run webpack
via your preferred method.
fallback
Type: String
Default: 'file-loader'
Specifies an alternative loader to use when a target file's size exceeds the limit set in the limit
option.
// webpack.config.js { loader: 'url-loader', options: { fallback: 'responsive-loader' } }
The fallback loader will receive the same configuration options as url-loader.
For example, to set the quality option of a responsive-loader above use:
{ loader: 'url-loader', options: { fallback: 'responsive-loader', quality: 85 } }
limit
Type: Number
Default: undefined
A Number
specifying the maximum size of a file in bytes. If the file is greater than the limit, file-loader
is used by default and all query parameters are passed to it. Using an alternative to file-loader
is enabled via the fallback
option.
The limit can be specified via loader options and defaults to no limit.
// webpack.config.js { loader: 'url-loader', options: { limit: 8192 } }
mimetype
Type: String
Default: (file extension)
Sets the MIME type for the file to be transformed. If unspecified the file extensions will be used to lookup the MIME type.
// webpack.config.js { loader: 'url-loader', options: { mimetype: 'image/png' } }
Please take a moment to read our contributing guidelines if you haven't yet done so.
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/url-loader