# image-size-loader

> image size loader module for webpack

Latest version **0.7.0** (published 2015-07-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install image-size-loader
pnpm add image-size-loader
yarn add image-size-loader
bun add image-size-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2015-07-14 |
| First published | 2014-12-04 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 41 |
| Author | Patrick Collins |
| Maintainers | patcoll, boopathi |

## Links

- npm: https://www.npmjs.com/package/image-size-loader
- Repository: https://github.com/patcoll/image-size-loader
- Homepage: https://github.com/patcoll/image-size-loader#readme
- Issues: https://github.com/patcoll/image-size-loader/issues
- npm.io page: https://npm.io/package/image-size-loader

## Dependencies (2)

- [image-size](https://npm.io/package/image-size.md) ^0.3.5
- [loader-utils](https://npm.io/package/loader-utils.md) ^0.2.7

## Recent versions

- 0.7.0 (latest) — 2015-07-14
- 0.6.0 — 2015-06-16
- 0.5.0 — 2014-12-04

## README

# image size loader for webpack

A webpack image loader with extra size info for image.

## Usage

[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)

``` javascript
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

```js
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>:hash:<digestType>:<length>]` optionally you can configure
  * other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
  * other `digestType`s, 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

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

#### example_module.js

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

---
_Source: https://npm.io/package/image-size-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._