rollup-plugin-img

1.1.0 verified Fri May 01 auth: no javascript maintenance

Rollup plugin to import image files (PNG, JPG, GIF, SVG) as base64 data URIs or copied files, similar to Webpack's file-loader/url-loader. Current stable version 1.1.0. A single release exists; no updates since 2018. Differentiators: simple configuration, supports hash filenames, custom output path, and file size limit for base64 inlining. Alternative to rollup-plugin-image or rollup-plugin-url.

Common errors

error Error: Invalid plugin hook: options ↓

cause Plugin uses deprecated options hook which may not be supported in newer Rollup versions.

fix

Upgrade to Rollup 2.x with compatible plugin; or use rollup-plugin-url which supports modern API.

error TypeError: image is not a function ↓

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

fix

Use import image from 'rollup-plugin-img' (no curly braces).

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

cause Plugin not configured to handle image files; order of plugins matters.

fix

Ensure image() plugin is included in the plugins array and image extensions are covered.

Warnings

gotcha The `output` option is described as 'Required' in README but not enforced; missing it may cause files to be copied to the current working directory. ↓

fix Always specify `output` option to control where copied files land.

gotcha When `hash: true`, hash is appended to the filename but the extension remains; no collision detection if two identical images are imported. ↓

fix Use a more robust plugin like rollup-plugin-url or rollup-plugin-file for production.

gotcha Plugin ignores SVGs by default if extensions override does not include them; default regex only matches PNG, JPG, JPEG, GIF, SVG. ↓

fix If using custom extensions, include SVG if needed: /.(png|jpg|jpeg|gif|svg)$/

gotcha Files exceeding `limit` are copied to the output directory; the plugin does not emit them as assets properly for Rollup's asset handling. ↓

fix Use rollup-plugin-copy or the official Rollup asset mechanism for copying files.

deprecated Package last updated in 2018; uses deprecated Rollup plugin API (e.g., `options` hook). ↓

fix Consider migrating to rollup-plugin-url (for base64) or @rollup/plugin-image for better maintenance.

Install

npm install rollup-plugin-img

yarn add rollup-plugin-img

pnpm add rollup-plugin-img

Imports

default

wrong

const image = require('rollup-plugin-img').default

correct

import image from 'rollup-plugin-img'

Plugin is ESM-only; use import syntax.

image

wrong

import { image } from 'rollup-plugin-img'

correct

import image from 'rollup-plugin-img'

Default export, not named.

Quickstart

Shows how to configure rollup-plugin-img with options for output directory, size limit, and hash filenames.

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

export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'cjs' },
  plugins: [
    image({
      output: 'dist/images',
      limit: 10000,
      hash: true
    })
  ]
};