image-size-loader
A webpack image loader with extra meta information for image.
Usage
Getting Started
To begin, you'll need to install image-size-loader:
$ npm install --save-dev @lesechos/image-size-loaderOr
$ yarn add -D @lesechos/image-size-loaderThen 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