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.
@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.
Meta
CONTRIBUTING
LICENSE (MIT)