Registry / web-framework / base64-image-loader

base64-image-loader

library1.2.1jsnpmunverified

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.

web-framework

npm install base64-image-loader

github ↗package ↗

INSTALL

IMPORT

SIG · BASE64-IMAGE-LOADE

base64-image-loader

web-frameworkjavascriptv1.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

base64-image-loader

✓ import file from 'base64-image-loader!./file.png'

✗ import file from 'base64-image-loader?name=./file.png'

Use inline loader syntax with webpack. May need webpack 4+ rule configuration for proper behavior.

require

✓ const file = require('base64-image!./file.png')

✗ const file = require('base64-image-loader!./file.png')

In CommonJS, the loader can be referenced without the 'loader' suffix when using shorthand syntax (webpack 1/2 style).

webpack

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

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

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.

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;

Debug

Known issues

gotchaBase64 encoding increases file size by ~33%; not suitable for large images.

fix

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

affects: all

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

fix

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

affects: >=1.0.0

gotchaThe 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!'.

affects: all

gotchaThe 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.

affects: all

Errors

Common errors & fixes

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

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.

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

Using deprecated 'loaders' property in webpack 2+.

fix

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

TypeError: this.cacheable is not a function

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

fix

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

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jahredhope/base64-image-loader ↗

packagehttps://www.npmjs.com/package/base64-image-loader ↗