Registry / devops / image-source-loader

image-source-loader

JSON →
library0.6.5jsnpmunverified

Webpack loader that returns image metadata (base64 URI, width, height) as a JavaScript object. Version 0.6.5 is the latest; last published in 2022. It differentiates from simple base64 loaders by also providing image dimensions. Designed for Rax framework, but usable in any webpack project. The loader supports common image formats (see mimes.json). Release cadence: infrequent, no recent updates.

devops
npm install image-source-loader
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · IMAGE-SOURCE-LOADE
I
image-source-loader
devopsjavascriptv0.6.5
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

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

image-source-loader
✓ import source from 'image-source!./image.png'
✗ import source from 'image-source-loader!./image.png'
Loader is invoked via inline loader syntax 'image-source!', not by importing the package directly.
source object
✓ const source = require('image-source!./image.png');
✗ const source = require('image-source-loader!./image.png');
CommonJS require uses the same inline loader prefix. Use 'image-source!' not 'image-source-loader!'.
webpack config
✓ { test: /\.(png|jpg)$/, use: 'image-source-loader' }
✗ { test: /\.png$/, use: 'image-source' }
In webpack config, you reference the npm package name 'image-source-loader', not the inline prefix 'image-source!'.

Configure webpack to use image-source-loader for PNG/JPG files, then import an image to get its base64 URI and dimensions.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: 'image-source-loader' } ] } }; // app.js import source from './image.png'; console.log(source); // { uri: 'data:image/png;base64,...', width: 800, height: 600 }
Debug
Known issues
gotchaThe loader returns an object, not a string. Many expect a base64 string directly.
fix
Access source.uri for the base64 string, source.width and source.height for dimensions.
affects: >=0.1.0
gotchaInline loader syntax uses 'image-source!' not 'image-source-loader!'.
fix
Use require('image-source!./file.png') or import from 'image-source!./file.png'.
affects: >=0.1.0
gotchaThe loader only supports formats listed in mimes.json (common web formats). Unsupported formats will cause a webpack error.
fix
Check mimes.json in the package for supported extensions. Add custom mime support if needed.
affects: >=0.1.0
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'image-source' in ...
Using 'image-source' instead of 'image-source-loader' in webpack config.
fix
In webpack config use 'image-source-loader' as the loader name. For inline usage, use 'image-source!' (with exclamation).
TypeError: source is not a string
Assuming the loader returns a base64 string directly, but it returns an object.
fix
Access source.uri to get the base64 string.
Upgrade
Version history
0.6.5latest on npm
Audit
Dependencies
webpackrequiredThis is a webpack loader; requires webpack to function.
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/alibaba/rax ↗
packageimage-source-loader ↗
homepagehttps://github.com/alibaba/rax#readme ↗
image-source-loader — npm install image-source-loader · libregistry