{"id":19378,"library":"base64-image-loader","title":"base64-image-loader","description":"A webpack loader that converts images to base64 data URIs suitable for embedding directly in HTML img src attributes. Version 1.2.1 is the current stable release; the project appears to be in maintenance mode with infrequent updates. Unlike generic base64 loaders, this one returns a complete data URI string (e.g., 'data:image/png;base64,...') rather than raw base64, making it easy to drop into img tags without manual prefixing. Supports common image formats via a MIME map but has limited extensibility. Not actively maintained since 2018, and relies on webpack 1.x/2.x conventions — incompatible with modern webpack versions without custom configuration.","status":"maintenance","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/jahredhope/base64-image-loader","tags":["javascript","base64","image","webpack","loader","img","src","img src"],"install":[{"cmd":"npm install base64-image-loader","lang":"bash","label":"npm"},{"cmd":"yarn add base64-image-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add base64-image-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Use inline loader syntax with webpack. May need webpack 4+ rule configuration for proper behavior.","wrong":"import file from 'base64-image-loader?name=./file.png'","symbol":"base64-image-loader","correct":"import file from 'base64-image-loader!./file.png'"},{"note":"In CommonJS, the loader can be referenced without the 'loader' suffix when using shorthand syntax (webpack 1/2 style).","wrong":"const file = require('base64-image-loader!./file.png')","symbol":"require","correct":"const file = require('base64-image!./file.png')"},{"note":"Use webpack 2+ 'rules' syntax. The 'loaders' key is deprecated in webpack 2+. The loader name in config can omit '-loader' suffix but it's recommended to keep it.","wrong":"module.exports = {\n  module: {\n    loaders: [\n      { test: /\\.png$/, loader: 'base64-image' }\n    ]\n  }\n}","symbol":"webpack","correct":"module.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpg|gif)$/,\n        use: 'base64-image-loader'\n      }\n    ]\n  }\n}"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpg|gif)$/,\n        use: 'base64-image-loader'\n      }\n    ]\n  }\n};\n\n// In your code\nimport imgSrc from './image.png';\n// imgSrc is a data URI like 'data:image/png;base64,iVBOR...'\ndocument.getElementById('img').src = imgSrc;","lang":"javascript","description":"Shows how to configure base64-image-loader in webpack config and use it to get a data URI from an image import."},"warnings":[{"fix":"Use a URL loader or copy-webpack-plugin for larger assets.","message":"Base64 encoding increases file size by ~33%; not suitable for large images.","severity":"gotcha","affected_versions":"all"},{"fix":"Use 'rules' array with 'use' property in webpack config.","message":"Webpack 1/2 loader syntax ('loaders' property) used in examples is deprecated in webpack 3+.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"When using the loader inline, prefix the path with 'base64-image-loader!'.","message":"The loader expects the require/import to use the '!./file.png' notation, not a plain path.","severity":"gotcha","affected_versions":"all"},{"fix":"If you need a new format, fork the package and add to mimes.json, or use a different loader.","message":"The loader only works with images listed in mimes.json; custom extensions require modifying the file.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev base64-image-loader' and ensure your webpack config uses 'base64-image-loader' as the loader.","cause":"Loader not installed or not configured correctly in webpack.","error":"Module not found: Error: Can't resolve 'base64-image-loader'"},{"fix":"Replace 'loaders' with 'rules' array: { module: { rules: [ { test: /\\.png$/, use: 'base64-image-loader' } ] } }","cause":"Using deprecated 'loaders' property in webpack 2+.","error":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Add custom webpack rules to skip cache or use webpack 1/2/3.","cause":"Loader not compatible with webpack 4+ (loader lacks cacheable method).","error":"TypeError: this.cacheable is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}