ImageBase64Plugin

Description

Allows images to be bundled as base64 data. Supports most image formats, including SVGs.

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()],
});

An example of how to use it with react:

const image = require("./icons/image.png")
<img src={image} />

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.

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";

To run tests

node test --file=ImageBase64Plugin.test.ts