webpack-image-placeholder-plugin

In JavaScript, import "<width in pixel>x<height in pixel>.png"

import placeholder from "200x300.png";

const element = document.createElement("img");
element.src = placeholder;
document.body.appendChild(element);

This will generate image with specific width and height automatically.

Install

  npm i --save-dev webpack-image-placeholder-plugin

Webpack configuration

const ImagePlaceholderPlugin = require("webpack-image-placeholder-plugin");

module.exports = {
  // ...
  plugins: [new ImagePlaceholderPlugin()]
};