# Adding images to your flow or node's ReadMe in the Node-RED library

**URL:** <https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429>\
**Category:** Core Development\
**Created:** [22 May 2019 15:12 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429 "2019-05-22T15:12:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [22 May 2019 15:12 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429/1 "2019-05-22T15:12:59Z")

</div>

Have you ever added a node of flow to the Node-RED Library and said to yourself

> "Oh, this ReadMe would be so much better if I could just add a couple images to it!"

However, git does not allow you to copy an image directly into the ReadMe. But never fear, there is a simple way to do it!.

1. create your readme and save it.
2. drag an image into a comment
3. edit the comment and copy the markup for the image.
4. edit the readme, paste the markup where you want the image to appear.
5. save the the changes and delete the comment (if you want)

that's it, you are all done. To see an example where I added an image of the flow at the end of a readme see [DEMO: multiple devices (pickable via a dropdown) feeding single gauge (flow) - Node-RED](https://flows.nodered.org/flow/66a6acd17ed49cb5cd464d58627b7d78)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [22 May 2019 17:32 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429/2 "2019-05-22T17:32:52Z")

</div>

Hi Paul,  
That's pretty neat, I think I might have a situation where I can use this idea/flow.

Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 May 2019 18:57 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429/3 "2019-05-22T18:57:17Z")

</div>

Hey Paul,

Thanks for sharing! I used that trick also for one of my nodes some time ago (based on a similar [article](https://grantwinney.com/cool-markdown-tricks-for-github/#quickly-insert-images)), but then suddenly I thought: _suppose the Github guys delete all the images (that I have added this way) at some future time_. I have no clue whether that will ever happen, but since then I add them again to my Github repository:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/540943e82ca7730cd8be7602b4fd4aaabce17e3a.png)

This allows me also to restore older **versions** of my images.

But the main disadvantage is that now my images are also **deployed** with '_npm install ..._', which is rather resource inefficient ... I suppose I can avoid that somehow (e.g. with the .gitignore file ?), but hadn't have a chance yet to figure that out ...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 May 2019 20:15 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429/4 "2019-05-22T20:15:13Z")

</div>

If you are worried about GitHub deleting things from a Gist (I doubt they care unless you are chewing up many Gb of data storage), why not simply create a new repo just for the image files?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 May 2019 21:09 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429/5 "2019-05-22T21:09:12Z")

</div>

> [@TotallyInformation](#):
>
> I doubt they care

@TotallyInformation,  
Indeed I assume also they don't care at all. But you know that suddenly a new manager can jump of out a box, and introduce weird decisions 🤣

Will try soon this [stackoverflow](https://stackoverflow.com/questions/47184866/npm-install-ignore-some-folders) tip. Would be nice if I could exclude my '_Images_' folder via that .npmignore file ...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 May 2019 21:57 UTC](https://discourse.nodered.org/t/adding-images-to-your-flow-or-nodes-readme-in-the-node-red-library/11429/6 "2019-05-22T21:57:43Z")

</div>

As github and npm are currently two separate entities yes you can use .npmignore to ignore whatever from what you push to npm. Of course then the readme on npm would need to point to the images on github as they would no longer be "local" to npm.