yarn add -D probe-image-size-loader
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} />
);
$ cd example
$ yarn
$ yarn build
$ node dist/main.js
{
src: 'cb12bc24511449db821768715e85b0d9.gif',
height: 208,
width: 220
}