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'