# Display image as header in User step

**URL:** <https://forum.novacura.com/t/display-image-as-header-in-user-step/869>\
**Category:** Flow Classic\
**Created:** [January 31, 2025, 9:16am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869 "2025-01-31T09:16:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jdoherty](https://avatars.discourse-cdn.com/v4/letter/j/7C9FD7/32.png) [@jdoherty](https://forum.novacura.com/u/jdoherty)\
**Post date:** [January 31, 2025, 9:16am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/1 "2025-01-31T09:16:05Z")

</div>

Is it possible to display an image (a jpeg stored on my PC) in a user step? I want to display a company logo on a user step.  
Thanks.

---

<div class="post-metadata">

**Author:** ![OlaCarlander](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/olacarlander/32/205_2.png) [@OlaCarlander](https://forum.novacura.com/u/OlaCarlander)\
**Post date:** [January 31, 2025, 12:12pm UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/2 "2025-01-31T12:12:38Z")

</div>

As the clients would not have access to that image your would first need to upload it somwehre on the internet (or a web server that the clients have access to), and the use the image viewer or similar user step control to display it.

The web server could be an exisitng, or imgur or a similar service, or even the flow server actually.

---

<div class="post-metadata">

**Author:** ![jdoherty](https://avatars.discourse-cdn.com/v4/letter/j/7C9FD7/32.png) [@jdoherty](https://forum.novacura.com/u/jdoherty)\
**Post date:** [January 31, 2025, 2:22pm UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/3 "2025-01-31T14:22:59Z")

</div>

OK thanks, I am amazed flow does not allow me to upload an image for display though.

---

<div class="post-metadata">

**Author:** ![OlaCarlander](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/olacarlander/32/205_2.png) [@OlaCarlander](https://forum.novacura.com/u/OlaCarlander)\
**Post date:** [January 31, 2025, 2:33pm UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/4 "2025-01-31T14:33:06Z")

</div>

I think there is a feature request in User Voice for fetching it as a binary from a database. And perhaps even from some store within the flow server, but that is sort of a slippery slope as there then could be miss-used to store all sorts of large things making everything slow.  
I know the environmnet variables has been used a lot for things it definitley is not used for, so there is also a reason for not allowing to store for example binaries on the flow server. But I see what you mean.

---

<div class="post-metadata">

**Author:** ![daniel](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/daniel/32/708_2.png) [@daniel](https://forum.novacura.com/u/daniel)\
**Post date:** [January 31, 2025, 4:53pm UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/5 "2025-01-31T16:53:36Z")

</div>

You can upload a file and save it to a “public” directory on the IIS server. This requires a lot of initial setup but is well worth the time (I have done it several times in the past). Then you can link to the image in the user step with the image viewer and a link similar to [https://novacuraserver.corporate.domain/public/corporatelogo.png](https://novacuraserver.corporate.domain/public/corporatelogo.png)

---

<div class="post-metadata">

**Author:** ![Abdul](https://avatars.discourse-cdn.com/v4/letter/a/7C9FD7/32.png) [@Abdul](https://forum.novacura.com/u/Abdul)\
**Post date:** [February 6, 2025, 10:02am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/6 "2025-02-06T10:02:24Z")

</div>

i test on the flow studio and it is work you can use convert any image to base64 and use the encode data as source you can contact me on teams i will help you to get work my name : Abdul Aloukla

you don’t need to upload the image and the image will be saved on the flow on Assignment or flow script or table

---

<div class="post-metadata">

**Author:** ![ivstde](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/ivstde/32/146_2.png) [@ivstde](https://forum.novacura.com/u/ivstde)\
**Post date:** [February 7, 2025, 10:03am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/7 "2025-02-07T10:03:35Z")

</div>

Hey @Abdul ,

i am interested in what you did to get the result you describe.  
Can you please attach your example flow here?

Thanks in advance!

B R  
Ivan

---

<div class="post-metadata">

**Author:** ![Abdul](https://avatars.discourse-cdn.com/v4/letter/a/7C9FD7/32.png) [@Abdul](https://forum.novacura.com/u/Abdul)\
**Post date:** [February 7, 2025, 10:29am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/8 "2025-02-07T10:29:43Z")

</div>

you can use it on the image viewer or image selection input  
you need to convert the image to base 64 you can use the flow studio or this website

> **[Base64 Image Encoder](https://www.base64-image.de/)**
>
> Optimize your images and convert them to base64 online. Drag & Drop your files, copy to clipboard with a click and use the result in HTML and CSS.

if you have the image on you computer use the website and if you have on the ifs you can use the encode to base 64 flow script and it is work but after you encode you need to add like this on the beginning data:image/png;base64,[base64that you encode using the flow script]

if you need to have many image you can put all the image on the table

if you have many question contact me i will help you 😉  
[Image Base64.flow](https://forum.novacura.com/uploads/short-url/ozRMdbQmXh3r4QE9K44MFYIcljF.flow) (20.4 KB)

---

<div class="post-metadata">

**Author:** ![jdoherty](https://avatars.discourse-cdn.com/v4/letter/j/7C9FD7/32.png) [@jdoherty](https://forum.novacura.com/u/jdoherty)\
**Post date:** [February 7, 2025, 10:59am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/9 "2025-02-07T10:59:33Z")

</div>

![image](https://europe1.discourse-cdn.com/flex013/uploads/novacuratalk/original/1X/e186a3bc19d711f9fdaf7fb6184f21b89f2420cf.png)

---

<div class="post-metadata">

**Author:** ![daniel](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/daniel/32/708_2.png) [@daniel](https://forum.novacura.com/u/daniel)\
**Post date:** [February 13, 2025, 3:01am UTC](https://forum.novacura.com/t/display-image-as-header-in-user-step/869/10 "2025-02-13T03:01:38Z")

</div>

> [@Abdul](#):
>
> if you have many question contact me i will help you 😉  
> [Image Base64.flow](https://forum.novacura.com/uploads/short-url/ozRMdbQmXh3r4QE9K44MFYIcljF.flow) (20.4 KB)

For anyone who tries this method (base64 encoded image), it _does_ work with the classic webclient, but does _not_ work with the NG Webclient or the Flow Classic Windows Client.
