Probe-Image-Size Loader

Uses probe-image-size to inject the height and width into image imports.

Install

yarn add -D probe-image-size-loader

Usage

Can also be used with lqip-loader.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        use: ['probe-image-size-loader', 'file-loader']
      }
    ]
  }
};

Output

module.exports = {
  src: __dirname + 'some/path/to/image.png',
  height: 100,
  width: 200
};

Usage in JS files

import image from './image.png';
 
const Image = () => (
  <img src={image.src} height={image.height} width={image.width} />
);

Example

$ cd example
$ yarn
$ yarn build
$ node dist/main.js

{
  src: 'cb12bc24511449db821768715e85b0d9.gif',
  height: 208,
  width: 220
}