# rehype-img-as

> use alt attribute as alternative store.

Latest version **0.0.7** (published 2017-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install rehype-img-as
pnpm add rehype-img-as
yarn add rehype-img-as
bun add rehype-img-as
```

## 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.0.7 |
| Published | 2017-12-03 |
| First published | 2017-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | kthjm |
| Maintainers | kthjm |
| Keywords | rehype, plugin |

## Links

- npm: https://www.npmjs.com/package/rehype-img-as
- Repository: https://github.com/kthjm/rehype-img-as
- Homepage: https://github.com/kthjm/rehype-img-as#readme
- Issues: https://github.com/kthjm/rehype-img-as/issues
- npm.io page: https://npm.io/package/rehype-img-as

## Dependencies (3)

- [rehype](https://npm.io/package/rehype.md) ^5.0.0
- [hast-util-select](https://npm.io/package/hast-util-select.md) ^1.0.1
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.11.0

## Recent versions

- 0.0.7 (latest) — 2017-12-03
- 0.0.6 — 2017-11-19
- 0.0.5 — 2017-09-15
- 0.0.4 — 2017-09-15
- 0.0.3 — 2017-09-15
- 0.0.2 — 2017-09-15
- 0.0.1 — 2017-09-15

## README

# rehype-img-as

[![npm](https://img.shields.io/npm/v/rehype-img-as.svg?style=flat-square)](https://www.npmjs.com/package/rehype-img-as)
[![npm](https://img.shields.io/npm/dm/rehype-img-as.svg?style=flat-square)](https://www.npmjs.com/package/rehype-img-as)
[![Build Status](https://img.shields.io/travis/kthjm/rehype-img-as.svg?style=flat-square)](https://travis-ci.org/kthjm/rehype-img-as)
[![Coverage Status](https://img.shields.io/codecov/c/github/kthjm/rehype-img-as.svg?style=flat-square)](https://codecov.io/github/kthjm/rehype-img-as)

use `alt` attribute as alternative store.

## Installation
```shell
yarn add rehype-img-as
```

## Usage

suppose to use with [`remark-rehype`](https://github.com/wooorm/remark-rehype) in Browser.

<!-- https://www.w3schools.com/html/html_entities.asp
http://www.howtocreate.co.uk/sidehtmlentity.html -->

```md
### image to bloburl
![as?fetch=bloburl&id=the_png&className=photo&style=width:100px;object-fit:contain](assets/foo.png)
![as?fetch=bloburl&id=the_jpg&className=photo&style=width:100px;object-fit:contain](assets/foo.jpg)
![as?fetch=bloburl&id=the_svg&className=photo&style=width:100px;object-fit:contain](assets/foo.svg)

### html/svg to hast
![as?fetch=hast](assets/foo.html)
![as?fetch=hast&viewBox=0 0 600 600](assets/foo.svg)
```
```html
<h3>image to bloburl</h3>
<p>
  <img src="blob:~" alt="" id="the_png" class="photo" style="width:100px;object-fit:contain" />
  <img src="blob:~" alt="" id="the_jpg" class="photo" style="width:100px;object-fit:contain" />
  <img src="blob:~" alt="" id="the_svg" class="photo" style="width:100px;object-fit:contain" />
</p>
<h3>html/svg to hast</h3>
<p>
  <span alt="">foo</span>
  <svg alt="" viewBox="0 0 600 600"><path /></svg>
</p>
```

<!--
```js
import unified from "unified";
import parse from "remark-parse";
import mdast2hast from "remark-rehype";
import imgas from "rehype-img-as";
import stringify from "rehype-stringify";

const dirPath = "./assets";
const processor = unified()
                    .use(parse)
                    .use(mdast2hast)
                    .use(imgas,{relative: dirPath})
                    .use(stringify);

fetch(`${dirPath}/hoge.md`)
.then((res)=>(res.text()))
.then((md)=>(processor.process(md)))
.then(({contents})=>(console.log(contents)))
.catch((err)=>(console.error(err)))
```
`assets/hoge.md`:
```md
# sample

![as?style=width:100px;object-fit:contain](./hoge.jpg)
![as?fetch=bloburl&style=width:100px;object-fit:contain](./hoge.png)
![as?fetch=bloburl&style=width:100px;object-fit:contain](./hoge.svg)
![as?fetch=hast&class=hoge&style=height:100%](./hoge.html)
![as?fetch=hast&class=hoge&style=height:100%](./hoge.svg)
```
Yields:
```html
<h1>sample</h1>
<p>
  <img style="width:100px;object-fit:contain" src="assets/hoge.jpg" />
  <img style="width:100px;object-fit:contain" src="bloburl" />
  <img style="width:100px;object-fit:contain" src="bloburl" />
  <div class="hoge" style="height:100%"><span></span></div>
  <svg class="hoge" style="height:100%"><g><path d="" /></g></svg>
</p>
```
-->

## API
### `![alt](src)`
`attributes` and special key **`fetch`** can be used in `alt` with prefix `as?`.

example: `![as?fetch=hast&className=foo,bar&style=position:relative;display:inline-block](src)`

use `className`, instead of `class`.

special key **`fetch`** can be set two value.

- `bloburl`
- `hast`


### `rehype().use(imgas[, options])`

###### `options.relative`
e.g. `assets/foo`
###### `options.reference`
e.g. `assets/foo/bar.md`

They are useful to resolve `src` with the markdown file's path.

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