rollup-plugin-inline-image

0.1.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin that inlines JPG, PNG, GIF, and SVG images as base64-encoded data URIs directly into the bundle. Version 0.1.0. This plugin is a fork of rollup-plugin-image that outputs plain string code instead of module code, making it compatible with UMD format. It is useful for small images where immediate availability at startup is preferred over file size. The plugin is stable but rarely updated.

Common errors

error Error: Cannot find module 'rollup-plugin-inline-image' ↓

cause Package not installed or missing from node_modules.

fix

npm install rollup-plugin-inline-image --save-dev

error Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) ↓

cause Rollup cannot resolve image imports because the plugin is not added to rollup.config.js.

fix

Add image() to the plugins array in rollup.config.js.

error TypeError: image is not a function ↓

cause Incorrect import: using named import instead of default import.

fix

Use import image from 'rollup-plugin-inline-image' instead of import { image } from 'rollup-plugin-inline-image'.

Warnings

gotcha Images are base64 encoded, resulting in ~33% larger size compared to disk. Only use for small images. ↓

fix Consider using a different plugin for larger images or production builds.

gotcha The plugin does not support SVG optimization; inline SVGs are not sanitized or minified. ↓

fix Use an additional SVG plugin like rollup-plugin-svgo for optimization.

gotcha File types are limited to JPG, PNG, GIF, and SVG. Other formats like WEBP or BMP are not supported. ↓

fix Use additional plugins or converters for unsupported formats.

Install

npm install rollup-plugin-inline-image

yarn add rollup-plugin-inline-image

pnpm add rollup-plugin-inline-image

Imports

default

wrong

const image = require('rollup-plugin-inline-image');

correct

import image from 'rollup-plugin-inline-image';

ESM default export; CommonJS require is not supported.

image (named)
wrong
```
import image from 'rollup-plugin-inline-image';
```
correct
```
import { image } from 'rollup-plugin-inline-image';
```
The package exports a default export, not a named export. Named import will fail.
importer
wrong
```
const logo = require('./rollup.png');
```
correct
```
import logo from './rollup.png';
```
Images are resolved by the plugin; CommonJS require will not trigger inlining.

Quickstart

Configures Rollup to inline PNG images as base64 data URIs using the plugin, then uses the imported image in code.

// rollup.config.js
import image from 'rollup-plugin-inline-image';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [image()]
};

// src/index.js
import logo from './logo.png';
document.body.appendChild(logo);