gulp-url-loader

Inline image imports as base64 encoded data url strings

Usage no npm install needed!

<script type="module">
  import gulpUrlLoader from 'https://cdn.skypack.dev/gulp-url-loader';
</script>

README

NPM version code style: prettier

gulp-url-loader

A gulp plugin to inline image imports inside script files as DataURL (base64 encoded file with mime type). Supports img, png and gif file formats.

Install

$ npm install --save-dev gulp-url-loader

Usage

This plugin works as webpack url-loader plugin for images. It was created out of need to use SSR for react web apps, where end result was single html file with all assets inlined, which was passed to pdf generation script.

Add it to your gulpfile.js:

var gulp = require('gulp')
const { urlLoader } = require('gulp-url-loader')

gulp.task('default', () => gulp
  .src('src/**/*')
  .pipe(urlLoader())
  .pipe(gulp.dest('dist')))

Import image inside some script file as is you were using webpack:

import imageVariableName from '../some/relative/path/image.png'

or

import * as imageVariableName from '../some/relative/path/image.png'