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

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?



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

1 Like

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’

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.

1 Like

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.

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.

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




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.

You might be able to use a data URL 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:


Which, theoretically, would render on the page; but it’s up to the Markdown processor/renderer. The forum happens to support it:

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

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.

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.

1 Like

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.

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.

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?

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

However these might not update as often as you want…

1 Like

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.

1 Like

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

1 Like