# Display an image on a GUI

**URL:** https://discourse.julialang.org/t/display-an-image-on-a-gui/57500
**Category:** Visualization
**Tags:** images, guis, display, ui
**Created:** [March 18, 2021, 9:18pm UTC](https://discourse.julialang.org/t/display-an-image-on-a-gui/57500 "2021-03-18T21:18:37Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Saliha](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@Saliha](https://discourse.julialang.org/u/Saliha)
#### Post date: [March 18, 2021, 9:18pm UTC](https://discourse.julialang.org/t/display-an-image-on-a-gui/57500/1 "2021-03-18T21:18:37Z")

</div>

Hello!

I am a beginner with julia programming. I am building a desktop app for a 3d plant architecture model. I am using Interact and blink. I need to insert images to my app (expl logo). I coudn’t find on the Interact and blink tutorials how to display an image on the ui window. Could someone help me please?

I am also looking for how to load values contained in an input file on the GUI. (link between widget and value in an input file)

Thank you for your help

---

<div class="post-metadata">

### Author: ![MA\_Laforge](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ma_laforge/32/385_2.png) [@MA\_Laforge](https://discourse.julialang.org/u/MA_Laforge)
#### Post date: [May 22, 2021, 5:20pm UTC](https://discourse.julialang.org/t/display-an-image-on-a-gui/57500/2 "2021-05-22T17:20:49Z")

</div>

Hi @Saliha. I don’t fully understand how the package hierarchy works, but I personally have been using `Interact.jl` to build my Blink “GUIs”. For example, I often use `vbox` & `hbox` layout tools provided by `Interact.jl` to subdivide my Blink window.

I think the following does more-or-less what you are seeking:

```julia
using Blink
using Interact
using Images

wnd=Window() #Create Blink window
img = Images.load("images/animage.png")
body!(wnd, vbox(img)) #Add image to the Blink window

```

Notice how I use the `Images` package to load a `.png` file and add it inside my blink window. There are alternatives of course, but I think this is probably one of the most straightforward ways of doing this.

Also note that I added my image (`img`) inside an `Interact` `vbox()` object. That’s because vbox will try to “`show()`” the image as a `MIME("image/png")` - and `Images.jl` defines that method somewhere.

If, on the other had, you tried to add your image (`img`) directly to the `wnd` object, you would get an error message because it apparently needs the image to display itself directly as a `MIME("text/html")`. At the moment, there is no method to draw the loaded image directly as `MIME("text/html")` - so it is easier to just always stick your image in something like a `vbox()`.

---

<div class="post-metadata">

### Author: ![MA\_Laforge](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ma_laforge/32/385_2.png) [@MA\_Laforge](https://discourse.julialang.org/u/MA_Laforge)
#### Post date: [May 22, 2021, 5:21pm UTC](https://discourse.julialang.org/t/display-an-image-on-a-gui/57500/3 "2021-05-22T17:21:25Z")

</div>

> [@Saliha](#):
>
> I am also looking for how to load values contained in an input file on the GUI. (link between widget and value in an input file)

Sorry. I don’t understand this question. Please elaborate.