@rollup/plugin-image

What is @rollup/plugin-image?

@rollup/plugin-image is a Rollup plugin that allows you to import image files into your JavaScript modules. This can be particularly useful for bundling images with your code, enabling you to use them as module imports.

What are @rollup/plugin-image's main functionalities?

Importing Images

This feature allows you to import image files directly into your JavaScript code. The imported image can then be used as a URL, which is useful for dynamically setting image sources in your application.

import logo from './logo.png';
console.log(logo); // Outputs the URL of the image

Using Images in Components

This feature demonstrates how to use the imported image in a React component. The image is imported and then used as the `src` attribute of an `img` element.

import React from 'react';
import logo from './logo.png';

const App = () => (
  <div>
    <img src={logo} alt="Logo" />
  </div>
);

export default App;

Other packages similar to @rollup/plugin-image

rollup-plugin-url

rollup-plugin-url is a Rollup plugin that allows you to import files as data-URIs or copy them to the output directory. It supports various file types, including images, and can be configured to inline files below a certain size limit. Compared to @rollup/plugin-image, rollup-plugin-url offers more flexibility in handling different file types and inlining small files.

rollup-plugin-image-files

rollup-plugin-image-files is another Rollup plugin that enables importing image files into your JavaScript modules. It is similar to @rollup/plugin-image but may offer different configuration options or support for additional image formats. It is a good alternative if you need more specific features or configurations.

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 (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.

Meta

CONTRIBUTING

LICENSE (MIT)