rollup-plugin-image-files

1.4.2 verified Mon Apr 27 auth: no javascript

Rollup plugin that copies image files to the output directory and replaces imports with require() references. Version 1.4.2, likely low maintenance cadence. Unlike rollup-plugin-image which inlines base64, this preserves binary files, making it suitable for React Native libraries where images must be bundled separately. Limited scope and niche use case.

Common errors

error Error: Could not resolve '../path/to/image.png' from 'src/index.js' ↓

cause Plugin not installed or configured correctly; Rollup cannot resolve image file.

fix

Ensure plugin is added to plugins array and images are in a directory relative to the source file.

error TypeError: images is not a function ↓

cause Attempting to call the import as a function, but the import is the default export which is already a function (should be called in plugins array).

fix

Use plugins: [images()] not plugins: [images].

Warnings

gotcha Plugin copies images to the same directory as the output bundle; may cause path collisions if multiple images have the same filename. ↓

fix Ensure unique image filenames or use a custom naming function (if supported).

gotcha Only works with static image imports (string literal paths); dynamic imports or computed paths are not handled. ↓

fix Use static import paths for images.

gotcha Output format must be CommonJS (cjs) for the generated require() calls to work in Node.js environments like React Native. ↓

fix Set output.format to 'cjs' in Rollup config.

Install

npm install rollup-plugin-image-files

yarn add rollup-plugin-image-files

pnpm add rollup-plugin-image-files

Imports

default
wrong
```
const images = require('rollup-plugin-image-files')
```
correct
```
import images from 'rollup-plugin-image-files'
```
ESM default import is standard; CJS require may not work if package does not export CJS.
images
```
import images from 'rollup-plugin-image-files'
```
The default export is the plugin factory function.

Quickstart

Basic Rollup configuration using rollup-plugin-image-files to handle image imports by copying files to output.

import images from 'rollup-plugin-image-files';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'cjs'
  },
  plugins: [images()]
};