base64-image-loader

1.2.1 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Module not found: Error: Can't resolve 'base64-image-loader' ↓

cause Loader not installed or not configured correctly in webpack.

fix

Run 'npm install --save-dev base64-image-loader' and ensure your webpack config uses 'base64-image-loader' as the loader.

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Using deprecated 'loaders' property in webpack 2+.

fix

Replace 'loaders' with 'rules' array: { module: { rules: [ { test: /\.png$/, use: 'base64-image-loader' } ] } }

error TypeError: this.cacheable is not a function ↓

cause Loader not compatible with webpack 4+ (loader lacks cacheable method).

fix

Add custom webpack rules to skip cache or use webpack 1/2/3.

Warnings

gotcha Base64 encoding increases file size by ~33%; not suitable for large images. ↓

fix Use a URL loader or copy-webpack-plugin for larger assets.

deprecated Webpack 1/2 loader syntax ('loaders' property) used in examples is deprecated in webpack 3+. ↓

fix Use 'rules' array with 'use' property in webpack config.

gotcha The loader expects the require/import to use the '!./file.png' notation, not a plain path. ↓

fix When using the loader inline, prefix the path with 'base64-image-loader!'.

gotcha The loader only works with images listed in mimes.json; custom extensions require modifying the file. ↓

fix If you need a new format, fork the package and add to mimes.json, or use a different loader.

Install

npm install base64-image-loader

yarn add base64-image-loader

pnpm add base64-image-loader

Imports

base64-image-loader
wrong
```
import file from 'base64-image-loader?name=./file.png'
```
correct
```
import file from 'base64-image-loader!./file.png'
```
Use inline loader syntax with webpack. May need webpack 4+ rule configuration for proper behavior.
require
wrong
```
const file = require('base64-image-loader!./file.png')
```
correct
```
const file = require('base64-image!./file.png')
```
In CommonJS, the loader can be referenced without the 'loader' suffix when using shorthand syntax (webpack 1/2 style).

webpack

wrong

module.exports = {
  module: {
    loaders: [
      { test: /\.png$/, loader: 'base64-image' }
    ]
  }
}

correct

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: 'base64-image-loader'
      }
    ]
  }
}

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.

Quickstart

Shows how to configure base64-image-loader in webpack config and use it to get a data URI from an image import.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: 'base64-image-loader'
      }
    ]
  }
};

// In your code
import imgSrc from './image.png';
// imgSrc is a data URI like 'data:image/png;base64,iVBOR...'
document.getElementById('img').src = imgSrc;