# Basic syntax for using Markdown so display jpeg or png from image manager?

**URL:** <https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847>\
**Category:** Ignition\
**Tags:** perspective, scripting\
**Created:** [April 10, 2020, 2:38pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847 "2020-04-10T14:38:32Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmahaffey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaffey/32/30949_2.png) [@tmahaffey](https://forum.inductiveautomation.com/u/tmahaffey)\
**Post date:** [April 10, 2020, 2:38pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/1 "2020-04-10T14:38:32Z")

</div>

I have a jpg in the image manager with the following link: ‘Markdown Images/20191101\_082446.jpg’

How might I display this image in the Markdown?

Thanks,

Trent

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 10, 2020, 4:27pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/2 "2020-04-10T16:27:23Z")

</div>

`![image](/system/images/Markdown%20Images/20191101_082446.jpg)` should work.

---

<div class="post-metadata">

**Author:** ![tmahaffey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaffey/32/30949_2.png) [@tmahaffey](https://forum.inductiveautomation.com/u/tmahaffey)\
**Post date:** [April 10, 2020, 4:41pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/3 "2020-04-10T16:41:22Z")

</div>

Thank you. Can you tell me what the synatx would be for an image on the local machine that is stored at this path: ‘C:\Trent\Cap.JPG’

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 10, 2020, 5:09pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/4 "2020-04-10T17:09:25Z")

</div>

You can’t load local images from web browsers serving network content. It would be a huge security issue; anything on the page would be able to see the content of whatever file was loaded.

---

<div class="post-metadata">

**Author:** ![tmahaffey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaffey/32/30949_2.png) [@tmahaffey](https://forum.inductiveautomation.com/u/tmahaffey)\
**Post date:** [April 10, 2020, 6:27pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/5 "2020-04-10T18:27:55Z")

</div>

so about from the webserver? C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main

Edit: so it looks like it is just “ ![Image]()”. Hmm, strange, I can’t seem to even get this HTML to only post the plaintext in this forum, even if I use quotation marks.

I’m trying to decide if its better for us to manager user uploads of photos onto the webserver, or to just ready the file as bytes and store the image in the database.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 10, 2020, 7:36pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/6 "2020-04-10T19:36:26Z")

</div>

> [@tmahaffey](#):
>
> I’m trying to decide if its better for us to manager user uploads of photos onto the webserver, or to just ready the file as bytes and store the image in the database.

Use the database, assuming the images aren't many gigabytes (in which case, Ignition's webserver is _also_ a poor choice). The webserver hosting mechanism is relying on us never changing the backing webserver settings, and hosting images insides Ignition's internal DB means every image load has to hit the IDB.

> [@tmahaffey](#):
>
> Hmm, strange, I can’t seem to even get this HTML to only post the plaintext in this forum, even if I use quotation marks.

The forum software also uses markdown for formatting, so you have to use a code block to post it - either:

```auto
`text`

```

Or:

````auto
    ```
    text
    ```

````

---

<div class="post-metadata">

**Author:** ![tmahaffey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaffey/32/30949_2.png) [@tmahaffey](https://forum.inductiveautomation.com/u/tmahaffey)\
**Post date:** [April 15, 2020, 5:58pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/7 "2020-04-15T17:58:07Z")

</div>

Thanks for the help on this one. One more thing, can you provide any reference to using the markdown editor for referencing a file that is stored as bytes? I’m using the upload component in perspective, and then I want to store the image in SQL database as well as display the file in the markdown editor. To store it in the SQL database, I first need to data = system.file.readfileasbytes() function. From there, what is the best way to display that rendered image in the markdown? I’ve only seen documentation for markdowns that display HTML from the webserver or other websites.

Thanks a bunch.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 15, 2020, 6:05pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/8 "2020-04-15T18:05:54Z")

</div>

You might be able to use a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of hosting the bytes somewhere - you’ll need to convert your bytes into base64, which is _probably_ best suited to the database, if your RDBMS of choice has a base64 encoding function. In Ignition you’d use a query binding and encode that into your markdown source - although, this is all theoretical, I’m not actually sure whether our Markdown component will parse data URLs.

So all together it would end up looking like:

```markdown
![image](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

```

Which, theoretically, would render on the page; but it’s up to the Markdown processor/renderer. The forum happens to support it:  
 ![image](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

---

<div class="post-metadata">

**Author:** ![iscrac](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/iscrac/32/49757_2.png) [@iscrac](https://forum.inductiveautomation.com/u/iscrac)\
**Post date:** [April 16, 2020, 8:16am UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/9 "2020-04-16T08:16:20Z")

</div>

HI!  
How can I paste the icon in MArkdown element? Is this possible?

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [April 25, 2020, 6:37pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/10 "2020-04-25T18:37:22Z")

</div>

Hi Paul  
Could you please guide me how to change font size and family of markdown component without using html coding.  
The style prop doesn’t work for it.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 4, 2020, 2:24pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/11 "2020-05-04T14:24:54Z")

</div>

I don’t think there is a way, presently. The component emits plain HTML elements `<p>`/`<ul>`, etc - so they’re styled with whatever the theme sets at the top level. Theoretically you could override that with the `markdown.renderers` property, but I don’t think you can actually make that work.

I’m going to file a ticket to review the markdown component; I think the implementation hasn’t been revisited since it was originally put together for ICC 2018.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [May 4, 2020, 7:41pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/12 "2020-05-04T19:41:44Z")

</div>

Thanks if I use html and sanitaize my input text to it, is it safe?  
For example delete any \> charector before input text to markdown.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 4, 2020, 8:30pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/13 "2020-05-04T20:30:40Z")

</div>

The component will already escape HTML by default; if you have trusted input you can choose to _stop_ the component from escaping HTML, but the default is already to ignore it.

---

<div class="post-metadata">

**Author:** ![SBL\_MC](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sbl_mc/32/56813_2.png) [@SBL\_MC](https://forum.inductiveautomation.com/u/SBL_MC)\
**Post date:** [March 9, 2022, 12:49pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/14 "2022-03-09T12:49:25Z")

</div>

Hi PGriffith,

Is there a way to upload a image file using the FileUpload function to a destination that will be accessible in the Markdown box?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 9, 2022, 2:01pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/15 "2022-03-09T14:01:38Z")

</div>

you could access files in the markdown here  
`C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main`

example for image located here named “mmm.jpg”  
`C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main\mmm.jpg`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d5b502a76a7e67528157da434658a6fa1792f412.png)

However these might not update as often as you want…

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 9, 2022, 3:17pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/16 "2022-03-09T15:17:28Z")

</div>

Or you could use Webdev and save the images to a mounted folder.  
Or you could use Webdev and return images from a database.  
Or you could use an external webserver (on the same domain or with appropriate CORS headers) connected to a database/file directory Ignition has access to in order to save the files.

Lots of ways to go here.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 9, 2022, 3:22pm UTC](https://forum.inductiveautomation.com/t/basic-syntax-for-using-markdown-so-display-jpeg-or-png-from-image-manager/33847/17 "2022-03-09T15:22:21Z")

</div>

Any of those options is better yeah. But requires the webdev module, or a server.

If you plan to use this often and do many edtis of the same image, you definitly should setup a server.  
Or if you already use the webdev or have the license use that^^