{"id":21452,"library":"image-loader-next","title":"image-loader-next","description":"A package that allows loading image files (PNG, SVG, JPG, JPEG, GIF, WebP, AVIF, ICO, BMP) in Node.js, Rollup, Vite, or Vitest the same way as Next.js. Current stable version is 0.1.2. It provides a Rollup plugin and a Node.js loader. The generated modules expose src, width, height, and a default export. Compatible with Node.js 22+. Key differentiator: it mimics Next.js image handling in non-Next.js environments, enabling consistent image imports across tools.","status":"active","version":"0.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/remcohaszing/image-loader-next","tags":["javascript","avif","bmp","gif","ico","image","images","jpeg","jpg"],"install":[{"cmd":"npm install image-loader-next","lang":"bash","label":"npm"},{"cmd":"yarn add image-loader-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add image-loader-next","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export from the rollup subpath.","wrong":"import nextImages from 'image-loader-next/rollup'","symbol":"nextImages","correct":"import { nextImages } from 'image-loader-next/rollup'"},{"note":"Use with node:module register function.","symbol":"register (Node.js loader)","correct":"register('image-loader-next/node', import.meta.url)"},{"symbol":"Node.js loader via --loader flag","correct":"node --loader image-loader-next"}],"quickstart":{"code":"// Vite config\nimport { nextImages } from 'image-loader-next/rollup'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [nextImages()]\n})\n\n// Usage in component\nimport logo from './logo.png'\nconsole.log(logo.src, logo.width, logo.height)\n\n// Node.js loader\nimport { register } from 'node:module'\nregister('image-loader-next/node', import.meta.url)\nimport logo from './logo.png'\nconsole.log(logo.src, logo.width, logo.height)\n","lang":"typescript","description":"Shows Vite plugin setup and Node.js loader registration then image import usage."},"warnings":[{"fix":"Upgrade Node.js to version 22 or higher.","message":"Node.js 22+ required; older versions not supported.","severity":"breaking","affected_versions":"<22.0.0"},{"fix":"Access .src for the URL string: \nimport img from './img.png'\nconsole.log(img.src, img.width, img.height)","message":"Default export is an object with src, width, height — not a string.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure import { nextImages } from 'image-loader-next/rollup' and not from 'image-loader-next'.","message":"Plugin uses Rollup include/exclude filters; Vite config integration requires correct import path.","severity":"gotcha","affected_versions":"*"},{"fix":"Register the loader early in your entry file (e.g., at the top of the main module).","message":"Node.js loader must be registered before importing images; order matters with other loaders.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install the package: npm install image-loader-next. Use correct subpath: 'image-loader-next/node'.","cause":"Package not installed or wrong import path.","error":"Error: Cannot find module 'image-loader-next/node'"},{"fix":"Use: import { nextImages } from 'image-loader-next/rollup'","cause":"Incorrect import (e.g., default instead of named import).","error":"TypeError: nextImages is not a function"},{"fix":"Upgrade to Node.js 22+ and use `node --loader image-loader-next` or call `register()` programmatically.","cause":"Using Node.js version <22 or not using --loader correctly.","error":"Error: The --experimental-loader flag is required for Node.js loaders."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}