{"id":21254,"library":"esbuild-plugin-inline-image","title":"esbuild-plugin-inline-image","description":"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.","status":"active","version":"0.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/natrim/esbuild-plugin-inline-image","tags":["javascript","esbuild","plugin","image","inline"],"install":[{"cmd":"npm install esbuild-plugin-inline-image","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-inline-image","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-inline-image","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default require is the documented pattern. Package does not provide ESM exports.","symbol":"inlineImage","correct":"const inlineImage = require('esbuild-plugin-inline-image');"},{"note":"Named import is incorrect because the module has a default export.","wrong":"import { inlineImage } from 'esbuild-plugin-inline-image';","symbol":"inlineImage","correct":"import inlineImage from 'esbuild-plugin-inline-image';"},{"note":"Named import with default is unnecessary and may confuse bundlers.","wrong":"import { default as inlineImage } from 'esbuild-plugin-inline-image';","symbol":"inlineImage","correct":"const inlineImage = require('esbuild-plugin-inline-image');"}],"quickstart":{"code":"const esbuild = require('esbuild');\nconst inlineImage = require('esbuild-plugin-inline-image');\n\nesbuild.build({\n  entryPoints: ['src/app.js'],\n  outfile: 'dist/bundle.js',\n  bundle: true,\n  plugins: [\n    inlineImage({\n      limit: 10000,\n      extensions: ['jpg', 'png', 'svg']\n    })\n  ]\n}).catch(() => process.exit(1));","lang":"javascript","description":"Shows how to require and use the plugin with esbuild, inlining images under 10KB."},"warnings":[{"fix":"Use CommonJS require or ESM default import. Avoid named import.","message":"Plugin does not export an ES module; require() or default import only.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Either omit filter and let plugin auto-register loaders, or set loader manually in esbuild config.","message":"When 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.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"If you want to disable completely, remove the plugin rather than setting limit to 0.","message":"Setting limit to 0 disables inlining but still registers loaders for extensions. This may silently change behavior.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Prefer passing limit in plugin options explicitly.","message":"Environment variable IMAGE_INLINE_SIZE_LIMIT may be removed or changed in future versions.","severity":"deprecated","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install esbuild-plugin-inline-image' in your project root.","cause":"Package not installed or wrong package name.","error":"Error: Cannot find module 'esbuild-plugin-inline-image'"},{"fix":"Use 'const inlineImage = require(\"esbuild-plugin-inline-image\");' (default import).","cause":"CommonJS require used with named import (e.g., const { inlineImage } = require(...)).","error":"TypeError: inlineImage is not a function"},{"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.","cause":"Plugin not applied or extensions not registered due to namespace or filter mismatch.","error":"Error: Build failed with 1 error: error: No loader is configured for \".svg\" files"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}