Registry / devops / rollup-plugin-image-assets

rollup-plugin-image-assets

library1.0.0jsnpmunverified

A Rollup plugin that copies image files to a configurable output directory instead of inlining them as base64. Version 1.0.0 provides features like custom output paths and renaming with MD5 hashes. Compared to alternatives like rollup-plugin-image, this plugin avoids bundle bloat by keeping images as separate files. It is forked from rollup-plugin-image-files and is actively maintained with a simple API.

devops

npm install rollup-plugin-image-assets

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-IMAG

rollup-plugin-image-assets

devopsjavascriptv1.0.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.

images

✓ import images from 'rollup-plugin-image-assets'

✗ const images = require('rollup-plugin-image-assets')

Plugin is ESM-only; using require() will fail unless your project uses esModuleInterop.

images (default)

✓ import images from 'rollup-plugin-image-assets'

✗ import { images } from 'rollup-plugin-image-assets'

Plugin is exported as default, not a named export.

Image source

✓ import imageSrc from './path/to/image.png'

✗ const imageSrc = require('./path/to/image.png')

Rollup resolves image imports to strings (file URLs). CommonJS require may not work in all environments.

Shows basic setup: install plugin, configure output directory, and import image file resulting in a hashed URL.

// rollup.config.js import images from 'rollup-plugin-image-assets'; export default { input: 'src/index.js', output: { dir: 'dist', format: 'esm' }, plugins: [ images({ output: 'assets/images' }) ] }; // src/index.js import logo from './logo.png'; console.log(logo); // e.g., '/assets/images/logo_abc123.png'

Debug

Known issues

gotchaThe plugin only emits ESM output; ensure your Rollup output format is 'esm' or compatible.

fix

Set output.format to 'esm' in rollup config.

affects: >=1.0.0

deprecatedOption 'output' used in older versions may be replaced; check documentation for current option name.

fix

Use the 'output' option as shown in Quickstart for v1.

affects: <1.0.0

gotchaImage paths are relative to the output directory, not the source. Ensure your HTML references correct path.

fix

Use plugin with 'publicPath' option if needed.

affects: >=1.0.0

Errors

Common errors & fixes

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

Rollup cannot handle image imports without the plugin.

fix

Add rollup-plugin-image-assets to your rollup config.

TypeError: Cannot read properties of undefined (reading 'substring')

Plugin received malformed file path or unsupported image type.

fix

Ensure image files have common extensions (png, jpg, gif, svg).

Error: Could not resolve './image.png' from 'src/index.js'

Plugin not installed or misconfigured.

fix

Install the plugin and add it to plugins array in rollup config.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/dongyuwei/rollup-plugin-images ↗

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