# Adding images inline

**URL:** <https://discuss.codemirror.net/t/adding-images-inline/1390>\
**Category:** Uncategorized\
**Created:** [October 22, 2017, 2:33pm UTC](https://discuss.codemirror.net/t/adding-images-inline/1390 "2017-10-22T14:33:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kel](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/k/a698b9/32.png) [@Kel](https://discuss.codemirror.net/u/Kel)\
**Post date:** [October 22, 2017, 2:33pm UTC](https://discuss.codemirror.net/t/adding-images-inline/1390/1 "2017-10-22T14:33:38Z")

</div>

Hello everyone,

maybe someone could help me with the following problem:  
Currently I use the gfm mode to get the wonderful markdown highlighting.

Now I want to add some kind of markdown image-url recognition and display the image below the urls.

These two programs do what I hope to archive:

1. [https://blog.inkdrop.info/new-feature-inline-image-widgets-v3-7-0-ee919436623f](https://blog.inkdrop.info/new-feature-inline-image-widgets-v3-7-0-ee919436623f) (it also uses codemirror / markdown)
2. [https://github.com/brrd/Abricotine](https://github.com/brrd/Abricotine)

I’ve tried to use widgets, but I’m honest… I did not understand a lot how to use them probably ☹

My goal:

1. insert image markdown code (see below)
2. codemirror inserts a widget (?) below the image line
3. When edit or delete the url, the image also updates (or will be removed)

Is this a wish that I can realize or is it almost impossible?

Greetings  
Kel

PS:

```auto
    Inline-style: 
    ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

    Reference-style: 
    ![alt text][logo]

    [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

```

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [October 23, 2017, 2:02pm UTC](https://discuss.codemirror.net/t/adding-images-inline/1390/2 "2017-10-23T14:02:17Z")

</div>

You probably want [line widgets](http://codemirror.net/doc/manual.html#addLineWidget) for this. When loading a document, scan it for image links and add the images. Then, on `"changes"` events, re-scan the area around the change and update the images, if any.

---

<div class="post-metadata">

**Author:** ![Kel](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/k/a698b9/32.png) [@Kel](https://discuss.codemirror.net/u/Kel)\
**Post date:** [October 24, 2017, 7:10pm UTC](https://discuss.codemirror.net/t/adding-images-inline/1390/3 "2017-10-24T19:10:59Z")

</div>

Hi marijn,  
thank you very much for your response. That works very well.

One question:  
How do I remove all Widgets of a given line?

Greetings  
Kel