Urify
inlines datauri expressions into your bundle
Install / Use
/learn @mattdesl/UrifyREADME
urify
A simple module to synchronously return a DataURI for the given file path.
This also includes a browserify transform to statically analyze the expression, inlining the URI during the bundle step. This allows you to do the following in the browser:
var path = require('path');
var urify = require('urify');
var uri = urify(path.join(__dirname, 'icon.png'));
var img = new Image()
img.onload = function() {
console.log("Image loaded!")
}
img.src = uri
While bundling, include the urify/transform like so:
browserify -t urify/transform foo.js > bundle.js
After bundling, the code will look like this:
var uri = "data:image/png;base64,....."
var img = new Image()
img.onload = function() {
console.log("Image loaded!")
}
img.src = uri
API Usage
urify = require('urify')
uri = urify(file)
Synchronously grabs a file's DataURI string, with the following format:
"data:image/png;base64,....."
transform = require('urify/transform')
stream = transform(file, [opts])
Returns a through stream inlining require('urify') calls to their statically evaluated DataURI strings.
Optionally, you can set which opt.vars will be used in the static-eval in addition to __dirname and ___filename.
Upgrade from 1.x to 2.x
There was a signficant breaking change between 1.x and 2.x. Note the following:
Specifying what should be urified
datauri has been replaced with urify.
1.x
var datauri = require('datauri');
var data = datauri('path/to/file');
2.x
var urify = require('urify');
var data = urify('path/to/file');
Specifying Transform
Use urify/transform instead of urify:
1.x
"browserify": {
"transform": [
"urify"
]
}
2.x
//2.x
"browserify": {
"transform": [
"urify/transform"
]
}
License
MIT, see LICENSE.md for details.
Related Skills
node-connect
346.4kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.2kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
346.4kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
346.4kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。

