{"id":22084,"library":"rollup-plugin-inline-image","title":"rollup-plugin-inline-image","description":"A Rollup plugin that inlines JPG, PNG, GIF, and SVG images as base64-encoded data URIs directly into the bundle. Version 0.1.0. This plugin is a fork of rollup-plugin-image that outputs plain string code instead of module code, making it compatible with UMD format. It is useful for small images where immediate availability at startup is preferred over file size. The plugin is stable but rarely updated.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/wayou/rollup-plugin-inline-image","tags":["javascript","rollup","modules","images"],"install":[{"cmd":"npm install rollup-plugin-inline-image","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-inline-image","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-inline-image","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to function as a Rollup plugin.","package":"rollup","optional":false}],"imports":[{"note":"ESM default export; CommonJS require is not supported.","wrong":"const image = require('rollup-plugin-inline-image');","symbol":"default","correct":"import image from 'rollup-plugin-inline-image';"},{"note":"The package exports a default export, not a named export. Named import will fail.","wrong":"import image from 'rollup-plugin-inline-image';","symbol":"image (named)","correct":"import { image } from 'rollup-plugin-inline-image';"},{"note":"Images are resolved by the plugin; CommonJS require will not trigger inlining.","wrong":"const logo = require('./rollup.png');","symbol":"importer","correct":"import logo from './rollup.png';"}],"quickstart":{"code":"// rollup.config.js\nimport image from 'rollup-plugin-inline-image';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    file: 'dist/bundle.js',\n    format: 'umd'\n  },\n  plugins: [image()]\n};\n\n// src/index.js\nimport logo from './logo.png';\ndocument.body.appendChild(logo);","lang":"javascript","description":"Configures Rollup to inline PNG images as base64 data URIs using the plugin, then uses the imported image in code."},"warnings":[{"fix":"Consider using a different plugin for larger images or production builds.","message":"Images are base64 encoded, resulting in ~33% larger size compared to disk. Only use for small images.","severity":"gotcha","affected_versions":"all"},{"fix":"Use an additional SVG plugin like rollup-plugin-svgo for optimization.","message":"The plugin does not support SVG optimization; inline SVGs are not sanitized or minified.","severity":"gotcha","affected_versions":"all"},{"fix":"Use additional plugins or converters for unsupported formats.","message":"File types are limited to JPG, PNG, GIF, and SVG. Other formats like WEBP or BMP are not supported.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install rollup-plugin-inline-image --save-dev","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'rollup-plugin-inline-image'"},{"fix":"Add `image()` to the plugins array in rollup.config.js.","cause":"Rollup cannot resolve image imports because the plugin is not added to rollup.config.js.","error":"Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)"},{"fix":"Use `import image from 'rollup-plugin-inline-image'` instead of `import { image } from 'rollup-plugin-inline-image'`.","cause":"Incorrect import: using named import instead of default import.","error":"TypeError: image is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}