image-size-loader

A webpack image loader with extra meta information for image.

Usage

Documentation: Using loaders

Getting Started

To begin, you'll need to install image-size-loader:

$ npm install --save-dev @lesechos/image-size-loader

Or

$ yarn add -D @lesechos/image-size-loader

Then add the loader to your webpack config. For example:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(webp|gif|jpe?g|png|svg)$/,
        use: [
          {
            loader: '@lesechos/image-size-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

Import images

Import (or require) the target file(s) in one of the bundle's files:

// bundle file
import image from './file.png';

That return an object with extra meta info:

  // console.log(image);
  {
    bytes: 1234
    height: 50,
    orientation: 1,
    src: "/assets/images/file.png",
    type: "png",
    width: 150,
  }

More options

More webpack config exemple on file-loader documentation

Documentation: file-loaders