Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
esbuild-plugin-inline-image
Advanced tools
[esbuild](https://esbuild.github.io/) plugin for inlining yout images conditionaly on size
esbuild plugin for inlining yout images conditionaly on size
Aka. switches loader for image between file
and dataurl
depending on size (as in Webpack)
Well, technically can be used even for non images (just set the right extensions), but who would want that?
yarn add esbuild-plugin-inline-image
or
npm install esbuild-plugin-inline-image
Add it to your esbuild
plugins list:
const esbuild = require("esbuild");
const inlineImage = require("esbuild-plugin-inline-image");
esbuild.build({
...
plugins: [
...
inlineImage()
]
...
});
You can then import images
import logo from "../assets/logo.png";
By default it works for jpg, png, gif, svg, webp, avif
extensions.
You can customize the options (ie. to disable svg loading if being handled by different plugin)
inlineImage({
// options
});
limit
: define image limit (in bytes) for size after which the image wll not be inline (default is 10000
)
IMAGE_INLINE_SIZE_LIMIT
true
(or Promise
that resolves to true
)
onLoad
argsextensions
: an array of extensions to work on (default is [
"jpg"
, "jpeg"
, "png"
, "gif"
, "svg"
, "webp"
, "avif"
]
)
filter
: you can also pass filter for onLoad directly, but in this case you need to manually set esbuild
loader option for the extensions to file
namespace
: custom namespace for the plugin to operate on, default's to built-in file
loaderRegisterExtensions
: register extensions
to esbuild loader? default's to true
, set false
to disable
Use plugin multiple times to have different size for different extensions
esbuild.build({
...
plugins: [
...
inlineImage({
extensions: ["svg", "webp", "avif"]
}),
inlineImage({
limit: 5000,
extensions: ["jpg", "jpeg", "gif"]
}),
inlineImage({
limit: 2000,
extensions: ["png"]
})
]
...
});
Use function to decide inlining
esbuild.build({
...
plugins: [
...
inlineImage({
limit: ({ path }) => {
// inline only svg, other extensions get only loader set to file
return path.endsWith(".svg");
}
}),
]
...
});
Set limit to -1 to inline all images
esbuild.build({
...
plugins: [
...
inlineImage({
limit: -1
})
]
...
});
Set limit to 0, to disable inlining (extensions will only get registed to loader
)
esbuild.build({
...
plugins: [
...
inlineImage({
limit: 0
})
]
...
});
Licensed as MIT open source.
FAQs
[esbuild](https://esbuild.github.io/) plugin for inlining yout images conditionaly on size
The npm package esbuild-plugin-inline-image receives a total of 4,742 weekly downloads. As such, esbuild-plugin-inline-image popularity was classified as popular.
We found that esbuild-plugin-inline-image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.