# rollup-plugin-img

> import image files with rollup

Latest version **1.1.0** (published 2017-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-img
pnpm add rollup-plugin-img
yarn add rollup-plugin-img
bun add rollup-plugin-img
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-10-26 |
| First published | 2017-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | alwaysolinetxm |
| Maintainers | alwaysonlinetxm |
| Keywords | rollup, rollup-plugin, image |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-img
- Repository: https://github.com/alwaysonlinetxm/rollup-plugin-img
- Homepage: https://github.com/alwaysonlinetxm/rollup-plugin-img#readme
- Issues: https://github.com/alwaysonlinetxm/rollup-plugin-img/issues
- npm.io page: https://npm.io/package/rollup-plugin-img

## Dependencies (1)

- [rollup-pluginutils](https://npm.io/package/rollup-pluginutils.md) ^2.0.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2017-10-26
- 1.0.6 — 2017-07-21
- 1.0.5 — 2017-05-16
- 1.0.4 — 2017-04-27
- 1.0.3 — 2017-04-26
- 1.0.2 — 2017-04-26
- 1.0.1 — 2017-04-26

## README

# rollup-plugin-img

Import image files with rollup. Let you import images just like what you do with webpack in your React code!


## Installation

    yarn add --dev rollup-plugin-img
    
or 

    npm install -D rollup-plugin-img
    
## Usage

In the rollup.config.js:

```JavaScript
import image from 'rollup-plugin-img';

export default {
  entry: 'src/index.js',
  dest: 'dist/bundle.js',
  plugins: [
    image({
      limit: 10000
    })
  ]
};
```

and in your React code:

```JavaScript
import img from 'path/image.png';

  ...
  render() {
    return <img src={ img } />;
  }
  ...
```

## Options

You can pass an option to the `image()` just like above, and there are some options:

- exclude & include: Optional. like other rollup plugins. [Details](https://github.com/rollup/rollup/wiki/Plugins)
- output: Required. the dest path of output image files. The first directory of dest will be handled as the base output directory(where the html file will be, usually).
- extensions: Optional. a regular expression for the extensions of image files.
- limit: Optional. the limit(byte) of the file size. A file will be transformed into base64 string when it doesn't exceeded the limit, otherwise, it will be copyed to the dest path.
- hash: Optional. a boolean value to indicate wheather to generate a hash string in file name(default false).

demo:

```JavaScript
  ...
  image({
    output: `${distPath}/images`, // default the root
    extensions: /\.(png|jpg|jpeg|gif|svg)$/, // support png|jpg|jpeg|gif|svg, and it's alse the default value
    limit: 8192,  // default 8192(8k)
    exclude: 'node_modules/**'
  })
  ...
```

## License

MIT

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