rehype-img-as

use alt attribute as alternative store.

Installation

yarn add rehype-img-as

Usage

suppose to use with remark-rehype in Browser.

### 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)

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

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.