# how can I show an image in editor?

**URL:** https://discuss.codemirror.net/t/how-can-i-show-an-image-in-editor/4578
**Category:** v6
**Created:** [June 17, 2022, 8:56am UTC](https://discuss.codemirror.net/t/how-can-i-show-an-image-in-editor/4578 "2022-06-17T08:56:14Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![seven1986](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/seven1986/32/2189_2.png) [@seven1986](https://discuss.codemirror.net/u/seven1986)
#### Post date: [June 17, 2022, 8:56am UTC](https://discuss.codemirror.net/t/how-can-i-show-an-image-in-editor/4578/1 "2022-06-17T08:56:14Z")

</div>

how can I show an image in editor?

---

<div class="post-metadata">

### Author: ![bxff](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/bxff/32/1915_2.png) [@bxff](https://discuss.codemirror.net/u/bxff)
#### Post date: [June 17, 2022, 4:35pm UTC](https://discuss.codemirror.net/t/how-can-i-show-an-image-in-editor/4578/2 "2022-06-17T16:35:45Z")

</div>

In general you would want to create a extension which decorates ranges, see [official decoration example](https://codemirror.net/examples/decoration/).

An working example(octo.app): [ink/images.ts at c4758965d91d9e2255d8062e4d7aef7f8b837a29 · writewithocto/ink · GitHub](https://github.com/writewithocto/ink/blob/c4758965d91d9e2255d8062e4d7aef7f8b837a29/src/vendor/extensions/images.ts)

---

<div class="post-metadata">

### Author: ![seven1986](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/seven1986/32/2189_2.png) [@seven1986](https://discuss.codemirror.net/u/seven1986)
#### Post date: [June 20, 2022, 9:52am UTC](https://discuss.codemirror.net/t/how-can-i-show-an-image-in-editor/4578/4 "2022-06-20T09:52:06Z")

</div>

could you share me an complately online demo, because version 6 is quite different with version 5, I am hardly to use it
