Registry / web-framework / rollup-plugin-inline-image

rollup-plugin-inline-image

library0.1.0jsnpmunverified

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.

web-framework

npm install rollup-plugin-inline-image

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-INLI

rollup-plugin-inline-image

web-frameworkjavascriptv0.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

ESM default export; CommonJS require is not supported.

image (named)

✓ import { image } from 'rollup-plugin-inline-image';

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

The package exports a default export, not a named export. Named import will fail.

importer

✓ import logo from './rollup.png';

✗ const logo = require('./rollup.png');

Images are resolved by the plugin; CommonJS require will not trigger inlining.

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);

Debug

Known issues

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

affects: all

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

affects: all

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

affects: all

Errors

Common errors & fixes

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

Package not installed or missing from node_modules.

fix

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

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

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.

TypeError: image is not a function

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'`.

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

rolluprequiredPeer dependency required to function as a Rollup plugin.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/wayou/rollup-plugin-inline-image ↗

packagehttps://www.npmjs.com/package/rollup-plugin-inline-image ↗