esm-loader-images

esm-loader-images

Node.js ESModule Loader for Images.

Supported image filename extensions:

• Binary (imported as filename text string):
  • .apng .avif .gif .ico .jpg .jpeg .jfif .pjpeg .pjp .png .webp
• Text (imported as full text content string):
  • .svg

Warning! Using experimental Node.js features and flags, API will likely change. This may be helpful for development and testing, but should not be used in production.

Usage

npm install --save-dev esm-loader-images

We want to import a .svg (or other image) file with Node.js:

<!-- image.svg -->
<svg>
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>

// index.js
import image from './image.svg'

console.log(image)
// "<svg><circle ... /></svg>"

Standalone

# node >= 20.7
cat << EOF > ./register.js
import { register } from 'node:module'
register('esm-loader-images', import.meta.url)
EOF
NODE_OPTIONS="--import ./register.js" node index.js

# node < 20.7
NODE_OPTIONS="--loader esm-loader-images" node index.js

Chainable

This loader can be configured, and chained with other loaders, using node-esm-loader.

npm install --save-dev node-esm-loader

// .loaderrc.js
export default {
  loaders: ['esm-loader-images'],
}

# node >= 20.7
NODE_OPTIONS="--import node-esm-loader/register" node index.js

# node < 20.7
NODE_OPTIONS="--loader node-esm-loader" node index.js

Options

Debug

// .loaderrc.js
export default {
  loaders: [
    {
      loader: 'esm-loader-images',
      options: {
        debug: true,
      },
    },
  ],
}

License

MIT