Registry / devops / esbuild-plugin-inline-image

esbuild-plugin-inline-image

library0.0.9jsnpmunverified

esbuild plugin that conditionally inlines images as data URLs when under a size threshold, switching loader between 'file' and 'dataurl' like Webpack's url-loader. Version 0.0.9 is the latest stable release. It supports configurable size limits via options or environment variable, custom file extensions, namespace isolation, and multiple plugin instances for per-extension rules. Smaller and simpler than full custom build setups, but has limited community adoption and ongoing maintenance uncertainty. Works only with esbuild's onLoad hook.

devops

npm install esbuild-plugin-inline-image

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-INL

esbuild-plugin-inline-image

devopsjavascriptv0.0.9

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.

inlineImage

✓ const inlineImage = require('esbuild-plugin-inline-image');

Default require is the documented pattern. Package does not provide ESM exports.

inlineImage

✓ import inlineImage from 'esbuild-plugin-inline-image';

✗ import { inlineImage } from 'esbuild-plugin-inline-image';

Named import is incorrect because the module has a default export.

inlineImage

✓ const inlineImage = require('esbuild-plugin-inline-image');

✗ import { default as inlineImage } from 'esbuild-plugin-inline-image';

Named import with default is unnecessary and may confuse bundlers.

Shows how to require and use the plugin with esbuild, inlining images under 10KB.

const esbuild = require('esbuild'); const inlineImage = require('esbuild-plugin-inline-image'); esbuild.build({ entryPoints: ['src/app.js'], outfile: 'dist/bundle.js', bundle: true, plugins: [ inlineImage({ limit: 10000, extensions: ['jpg', 'png', 'svg'] }) ] }).catch(() => process.exit(1));

Debug

Known issues

gotchaPlugin does not export an ES module; require() or default import only.

fix

Use CommonJS require or ESM default import. Avoid named import.

affects: >=0.0.1

gotchaWhen using a function for 'limit', you must manually set esbuild loader for extensions to 'file' if filter is provided. Otherwise plugin may not handle images as expected.

fix

Either omit filter and let plugin auto-register loaders, or set loader manually in esbuild config.

affects: >=0.0.1

gotchaSetting limit to 0 disables inlining but still registers loaders for extensions. This may silently change behavior.

fix

If you want to disable completely, remove the plugin rather than setting limit to 0.

affects: >=0.0.1

deprecatedEnvironment variable IMAGE_INLINE_SIZE_LIMIT may be removed or changed in future versions.

fix

Prefer passing limit in plugin options explicitly.

affects: >=0.0.1

Errors

Common errors & fixes

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

Package not installed or wrong package name.

fix

Run 'npm install esbuild-plugin-inline-image' in your project root.

TypeError: inlineImage is not a function

CommonJS require used with named import (e.g., const { inlineImage } = require(...)).

fix

Use 'const inlineImage = require("esbuild-plugin-inline-image");' (default import).

Error: Build failed with 1 error: error: No loader is configured for ".svg" files

Plugin not applied or extensions not registered due to namespace or filter mismatch.

fix

Ensure plugin is included in plugins array and extensions list matches the image files. If using a custom filter, also set loader manually in esbuild build config.

Upgrade

Version history

0.0.9latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/natrim/esbuild-plugin-inline-image ↗

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