ImageBase64Plugin
Description
Allows images to be bundled as base64
data. Supports most image formats,
including SVGs.
Usage
Setup
Import from FuseBox
const { ImageBase64Plugin } = require("fuse-box");
Inject into a chain
fuse.plugin(ImageBase64Plugin());
Or add it to the main config plugins list to make it available across bundles
FuseBox.init({
plugins: [ImageBase64Plugin()],
});
Require file in your code (Babel)
An example of how to use it with react
:
const image = require("./icons/image.png")
<img src={image} />
Require file in your code (Typescript)
An example of how to use it with react
in Typescript:
import * as image from "./icons/image.png"
<img src={image} />
Note: in order to make your asset imports play nice with TSLint, you can add the following module declarations to your project:
declare module "*.jpeg";
declare module "*.jpg";
declare module "*.gif";
declare module "*.png";
declare module "*.svg";
Add any other image formats you need to import.
Options
useDefault
If you wish to use import
statements, you would probably want to enable
default
option
ImageBase64Plugin({
useDefault: true,
});
And import your images like this:
import png from "./images/foo.png";
You need to use something like below without that option:
import * as png from "./images/foo.png";
Test
To run tests
node test --file=ImageBase64Plugin.test.ts