{"id":22068,"library":"rollup-plugin-image-assets","title":"rollup-plugin-image-assets","description":"A Rollup plugin that copies image files to a configurable output directory instead of inlining them as base64. Version 1.0.0 provides features like custom output paths and renaming with MD5 hashes. Compared to alternatives like rollup-plugin-image, this plugin avoids bundle bloat by keeping images as separate files. It is forked from rollup-plugin-image-files and is actively maintained with a simple API.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/dongyuwei/rollup-plugin-images","tags":["javascript","rollup-plugin","image"],"install":[{"cmd":"npm install rollup-plugin-image-assets","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-image-assets","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-image-assets","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Plugin is ESM-only; using require() will fail unless your project uses esModuleInterop.","wrong":"const images = require('rollup-plugin-image-assets')","symbol":"images","correct":"import images from 'rollup-plugin-image-assets'"},{"note":"Plugin is exported as default, not a named export.","wrong":"import { images } from 'rollup-plugin-image-assets'","symbol":"images (default)","correct":"import images from 'rollup-plugin-image-assets'"},{"note":"Rollup resolves image imports to strings (file URLs). CommonJS require may not work in all environments.","wrong":"const imageSrc = require('./path/to/image.png')","symbol":"Image source","correct":"import imageSrc from './path/to/image.png'"}],"quickstart":{"code":"// rollup.config.js\nimport images from 'rollup-plugin-image-assets';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm'\n  },\n  plugins: [\n    images({\n      output: 'assets/images'\n    })\n  ]\n};\n\n// src/index.js\nimport logo from './logo.png';\nconsole.log(logo); // e.g., '/assets/images/logo_abc123.png'","lang":"javascript","description":"Shows basic setup: install plugin, configure output directory, and import image file resulting in a hashed URL."},"warnings":[{"fix":"Set output.format to 'esm' in rollup config.","message":"The plugin only emits ESM output; ensure your Rollup output format is 'esm' or compatible.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the 'output' option as shown in Quickstart for v1.","message":"Option 'output' used in older versions may be replaced; check documentation for current option name.","severity":"deprecated","affected_versions":"<1.0.0"},{"fix":"Use plugin with 'publicPath' option if needed.","message":"Image paths are relative to the output directory, not the source. Ensure your HTML references correct path.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add rollup-plugin-image-assets to your rollup config.","cause":"Rollup cannot handle image imports without the plugin.","error":"Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)"},{"fix":"Ensure image files have common extensions (png, jpg, gif, svg).","cause":"Plugin received malformed file path or unsupported image type.","error":"TypeError: Cannot read properties of undefined (reading 'substring')"},{"fix":"Install the plugin and add it to plugins array in rollup config.","cause":"Plugin not installed or misconfigured.","error":"Error: Could not resolve './image.png' from 'src/index.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}