Uses probe-image-size to inject the height and width into image imports.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
__tests__
example
src
.gitignore
CHANGELOG.md
LICENSE
README.md
package.json
yarn.lock

README.md

CircleCI Codecov branch npm npm

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
}