# jsx-img-loader

> A loader for webpack which using img in react(jsx) is like in HTML

Latest version **1.2.0** (published 2020-05-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install jsx-img-loader
pnpm add jsx-img-loader
yarn add jsx-img-loader
bun add jsx-img-loader
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-05-09 |
| First published | 2020-04-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mingetian |
| Maintainers | mingetian |
| Keywords | webpack |

## Links

- npm: https://www.npmjs.com/package/jsx-img-loader
- Repository: https://github.com/mingetian/jsx-img-loader
- Issues: https://github.com/mingetian/jsx-img-loader/issues
- npm.io page: https://npm.io/package/jsx-img-loader

## Dependencies (2)

- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0
- [schema-utils](https://npm.io/package/schema-utils.md) ^2.6.5

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2020-05-09
- 1.1.2 — 2020-05-09
- 1.1.1 — 2020-05-09
- 1.1.0 — 2020-04-21
- 1.0.4 — 2020-04-10
- 1.0.3 — 2020-04-09
- 1.0.2 — 2020-04-09
- 1.0.1 — 2020-04-08

## README

### Why use this loader
- use img like in html 
- imgSource(options) make url simplify 
- loader help you require img. but @ must be use;
### Install
npm install jsx-img-loader --save-dev

or

yarn add jsx-img-loader --save-dev

### Usage
```
{
	test: /\.js$/,
	use: ['babel-loader',{
		loader: 'jsx-img-loader',
		options:{
			imgSource: './static/img'
		}
	}],
	exclude: /node_modules/,
	include: path.resolve(__dirname,'src')
},
```
### In jsx 
```
<img src="@1.png" alt=""/>
```
or

```
const imgUrl = "@1.png"

...

<img src={imgUrl} alt=""/>
```

### Options

imgSource:   Specifies that resource paths can be relative and absolute.so you can write less

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