rollup-plugin-image-files

1.0.2 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin that copies image files to the output directory and returns a require()-compatible path, instead of inlining base64. This fork (v1.0.2) builds on the original with additional features. It targets bundling libraries for React Native and similar environments where base64 inlining is undesirable. Version 1.0.2 is the current stable release, but development appears sparse (no recent commits). Key differentiator from rollup-plugin-image: writes files to disk rather than embedding them as base64.

Common errors

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

cause Image path is relative to source file, but Rollup cannot resolve non-JS files without plugin.

fix

Add the plugin to rollup config and ensure the image exists at the specified path.

error TypeError: images is not a function ↓

cause Named import used instead of default import.

fix

Use default import: import images from 'rollup-plugin-image-files'

Warnings

gotcha Image files must be in the same directory as the output bundle or relative paths break. ↓

fix Ensure images are placed in a directory relative to the output, or use a custom copy function.

gotcha The plugin may not handle SVG or non-raster images well; only tested with PNG/JPEG. ↓

fix Use a dedicated plugin for SVG or other formats.

deprecated The original package name 'rollup-plugin-image-files' is a fork; the underlying plugin 'rollup-plugin-image' is more maintained. ↓

fix Consider using rollup-plugin-image if base64 inlining is acceptable.

Install

npm install rollup-plugin-image-file

yarn add rollup-plugin-image-file

pnpm add rollup-plugin-image-file

Imports

default (images)

wrong

import { images } from 'rollup-plugin-image-files'

correct

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

The plugin exports a default function; named import will be undefined.

require (CJS)

wrong

const { images } = require('rollup-plugin-image-files')

correct

const images = require('rollup-plugin-image-files')

CommonJS require returns the default export as a whole.

TypeScript types
```
import images from 'rollup-plugin-image-files'
```
Types are shipped; no separate type import needed.

Quickstart

Shows basic setup: import the plugin, add to Rollup config, and use an image import in source.

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

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

// src/index.js
import logo from './logo.png';
console.log(logo); // e.g., './dist/logo.png'