Install
@rollup/plugin-image
🍣 A Rollup plugin which imports JPG, PNG, GIF, SVG, and WebP files.
Images are encoded using base64, which means they will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost.
Requirements
This plugin requires an LTS Node version (v14.0.0+) and Rollup v1.20.0+.
Install
Using npm:
npm install @rollup/plugin-image --save-dev
Usage
Assuming a src/index.js exists and contains code like the following:
import logo from './rollup.png';
console.log(logo);
Create a rollup.config.js configuration file and import the plugin:
import image from '@rollup/plugin-image';
export default {
input: 'src/index.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [image()]
};
Then call rollup either via the CLI or the API.
Once the bundle is executed, the console.log will display the Base64 encoded representation of the image.
Options
dom
Type: Boolean
Default: false
If true, instructs the plugin to generate an ES Module which exports a DOM Image which can be used with a browser's DOM. Otherwise, the plugin generates an ES Module which exports a default const containing the Base64 representation of the image.
Using this option set to true, the export can be used as such:
import logo from './rollup.png';
document.body.appendChild(logo);
exclude
Type: String | Array[...String]
Default: null
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
include
Type: String | Array[...String]
Default: null
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.
