Package Exports

@rollup/plugin-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rollup/plugin-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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 (v8.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 minimatch 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 minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.