{"id":41285,"library":"image-source-loader","title":"image-source-loader","description":"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.","status":"active","version":"0.6.5","language":"javascript","source_language":"en","source_url":"https://github.com/alibaba/rax","tags":["javascript","base64","image","webpack","loader","img","src"],"install":[{"cmd":"npm install image-source-loader","lang":"bash","label":"npm"},{"cmd":"yarn add image-source-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add image-source-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a webpack loader; requires webpack to function.","package":"webpack","optional":false}],"imports":[{"note":"Loader is invoked via inline loader syntax 'image-source!', not by importing the package directly.","wrong":"import source from 'image-source-loader!./image.png'","symbol":"image-source-loader","correct":"import source from 'image-source!./image.png'"},{"note":"CommonJS require uses the same inline loader prefix. Use 'image-source!' not 'image-source-loader!'.","wrong":"const source = require('image-source-loader!./image.png');","symbol":"source object","correct":"const source = require('image-source!./image.png');"},{"note":"In webpack config, you reference the npm package name 'image-source-loader', not the inline prefix 'image-source!'.","wrong":"{ test: /\\.png$/, use: 'image-source' }","symbol":"webpack config","correct":"{ test: /\\.(png|jpg)$/, use: 'image-source-loader' }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpg|gif)$/,\n        use: 'image-source-loader'\n      }\n    ]\n  }\n};\n\n// app.js\nimport source from './image.png';\nconsole.log(source);\n// { uri: 'data:image/png;base64,...', width: 800, height: 600 }","lang":"javascript","description":"Configure webpack to use image-source-loader for PNG/JPG files, then import an image to get its base64 URI and dimensions."},"warnings":[{"fix":"Access source.uri for the base64 string, source.width and source.height for dimensions.","message":"The loader returns an object, not a string. Many expect a base64 string directly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use require('image-source!./file.png') or import from 'image-source!./file.png'.","message":"Inline loader syntax uses 'image-source!' not 'image-source-loader!'.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Check mimes.json in the package for supported extensions. Add custom mime support if needed.","message":"The loader only supports formats listed in mimes.json (common web formats). Unsupported formats will cause a webpack error.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.6.5':20 '2022':27 'also':35 'base64':11,32,64 'cadenc':58 'common':52 'design':39 'differenti':29 'dimens':38 'format':54 'framework':42 'height':14 'imag':2,9,37,53,65 'image-source-load':1 'img':68 'infrequ':59 'javascript':17,63 'last':24 'latest':23 'loader':4,6,33,50,67 'metadata':10 'mimes.json':56 'object':18 'project':48 'provid':36 'publish':25 'rax':41 'recent':61 'releas':57 'return':8 'see':55 'simpl':31 'sourc':3 'src':69 'support':51 'updat':62 'uri':12 'usabl':44 'version':19 'webpack':5,47,66 'width':13","created_at":"2026-06-04T18:51:40.453630+00:00","updated_at":"2026-06-04T18:51:40.453630+00:00","problems":[{"fix":"In webpack config use 'image-source-loader' as the loader name. For inline usage, use 'image-source!' (with exclamation).","cause":"Using 'image-source' instead of 'image-source-loader' in webpack config.","error":"Module not found: Error: Can't resolve 'image-source' in ..."},{"fix":"Access source.uri to get the base64 string.","cause":"Assuming the loader returns a base64 string directly, but it returns an object.","error":"TypeError: source is not a string"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/alibaba/rax#readme","github":"https://github.com/alibaba/rax","docs":null,"changelog":null,"pypi":null,"npm":"image-source-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}