Package Exports

image-size-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (image-size-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

image size loader for webpack

A webpack image loader with extra size info for image.

Usage

Documentation: Using loaders

npm install image-size-loader --save

var image = require("image-size!./file.png");
// => emits file.png to the output directory
// => returns an object
// => { width: 150, height: 50, type: "png", src: __webpack_public_path__ + "file.png", bytes: 1234 }

Options

query params

name

var image = require('image-size?name=[hash].[ext]!./file.png');

Filename placeholders

[ext] the extension of the resource
[name] the basename of the resource
[path] the path of the resource relative to the context query parameter or option.
[hash] the hash of the content
[<hashType>#️⃣<digestType>:<length>] optionally you can configure
- other hashTypes, i. e. sha1, md5, sha256, sha512
- other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
- and length the length in chars
[N] the N-th match obtained from matching the current file name against the query param regExp

Source: https://github.com/webpack/loader-utils#interpolatename

Examples

webpack.config.js

// webpack.config.js
module.exports = {
  output: {
    publicPath: '/public/'
  },
  module: {
    loaders: [
      {
        test: /\.(gif|jpeg|jpg|png|svg)$/,
        loader: 'image-size'
      }
    ]
  }
};

example_module.js

var result = require("./image.png");
// => {width: 500, height: 700, type: "png", src: __webpack_public_path__ + "image.png", bytes: 1234}