# Simplest way to display a picture in a webapp with Genie.jl

**URL:** <https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387>\
**Category:** Web Stack\
**Tags:** webapps, genie\
**Created:** [May 1, 2021, 4:38pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387 "2021-05-01T16:38:54Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sim/32/22207_2.png) [@sim](https://discourse.julialang.org/u/sim)\
**Post date:** [May 1, 2021, 4:38pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/1 "2021-05-01T16:38:54Z")

</div>

Hello, I’m an absolute beginner in Genie.jl and in web stack in general. I want to build a webpage which periodically generates a random picture using some julia code, and displays it.

To begin, I want to simply display a picture in the browser. The picture `pic.png` is my root folder. When I do

```julia
route("/") do 
  html("<img src=\"pic.png\"/>")
end

```

the picture does not appear in the browser. Could someone help me understand solving this basic task ?

**Related question**. Suppose that I have a Julia function `generate` which generates a picture in the form of an RGB array (or any other image format supported by Julia, or a Plots object, etc).  
In my webapp, I basically want to call this function, collect the output `x = generate()`, save it in a file and display the result in an html page.  
Is there a way to do this without saving the picture, but to directly embed `pic` into the html ?

---

<div class="post-metadata">

**Author:** ![stiven.roytman](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@stiven.roytman](https://discourse.julialang.org/u/stiven.roytman)\
**Post date:** [May 1, 2021, 6:23pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/2 "2021-05-01T18:23:22Z")

</div>

I think the most immediate issue that you’re facing here is the path to image not being correct. I had to put my image into “public” directory for it to be successfully found, otherwise it throws a 404. Also, html() is not a recognized function, I have to use HTML(), all capital.

As for having a random image generated and rendered into HTML from memory, without writing to disk, I’m not sure… I managed to get a random image to generate every time I refresh the page with the following routes.jl code:

```julia
using Genie.Router, Images, ImageMagick
import Random.randstring

route("/") do
        newfilename = "$(randstring()).png"
        randimage = rand(RGB, 1000, 1000)
        ImageMagick.save("public/img/$newfilename", randimage)
        HTML("<img src='img/$newfilename' />")
end

```

A notable downside of this approach is that it generates and saves a random image into public/img, but doesn’t delete it thereafter. If I added code to delete the image at the end of the route() block, the image simply didn’t render when I visited the page. So definitely undesirable behavior if you plan for your web-app to be used a lot, for it to flood your disk with all sorts of data and never reclaim the used up space. If you find a better way, I would like to know about it!

---

<div class="post-metadata">

**Author:** ![josePereiro](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/josepereiro/32/17322_2.png) [@josePereiro](https://discourse.julialang.org/u/josePereiro)\
**Post date:** [May 1, 2021, 11:34pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/3 "2021-05-01T23:34:34Z")

</div>

Hi, I know nothing of the `Genie.jl` part.  
You can keep track of the created images and delete them when unused in this same method, a global counter can do the job, you can leave just the last few pictures in the folder…  
NOTE: This just works if the program is persistent

```julia
using Genie.Router, Images, ImageMagick
import Random.randstring

img_counter = 1
img_pool_size = 5
img_name(c) = "rand_img_$c.png"

route("/") do
        # delete old images
        rm_path = joinpath("public", "img", img_name(counter - img_pool_size))
        rm(rm_path; force = true)

        # create new img
        newfilename = img_name(img_counter)
        randimage = rand(RGB, 1000, 1000)
        img_counter += 1
        save_path = joinpath("public", "img", newfilename)
        ImageMagick.save(save_path, randimage)

        # html part
        html_path = joinpath("img", newfilename)
        HTML("<img src='$html_path' />")
end

```

---

<div class="post-metadata">

**Author:** ![Krastanov](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/krastanov/32/6817_2.png) [@Krastanov](https://discourse.julialang.org/u/Krastanov)\
**Post date:** [May 2, 2021, 1:17am UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/4 "2021-05-02T01:17:01Z")

</div>

You can base64 encode the image directly in the HTML. That way you do not need to implement additional image file server functionality or create temporary files.

```julia
image_stream = open(image_file) # This opens a file, but you can just as well use a in-memory buffer
data = Base64.base64encode(image_stream)
html = """<img src="data:image/png;base64,$(data)">"""

```

---

<div class="post-metadata">

**Author:** ![stiven.roytman](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@stiven.roytman](https://discourse.julialang.org/u/stiven.roytman)\
**Post date:** [May 2, 2021, 6:51am UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/5 "2021-05-02T06:51:02Z")

</div>

Very good to know. I wouldn’t have guessed that you can embed an image directly in HTML.

---

<div class="post-metadata">

**Author:** ![sim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sim/32/22207_2.png) [@sim](https://discourse.julialang.org/u/sim)\
**Post date:** [May 2, 2021, 1:27pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/6 "2021-05-02T13:27:36Z")

</div>

Thank you all @stiven.roytman @josePereiro for your answers. It turned out that saving files in the `public` folder was sufficient.

@stiven.roytman when I use HTML(“hello”), here is the result :

 ![Capture d’écran de 2021-05-02 15-21-14](https://global.discourse-cdn.com/julialang/original/3X/6/3/63e94125b76507bfab583f3f2ebb2937d8730e1f.png)

while with html(“hello”) I simply get the normal behaviour “hello”.

@Krastanov Thanks, this looks really like what I was trying to do ! Unfortunately,

```julia
route("/other") do 
      rndpic = rand(RGB, 100, 100)
      data = Base64.base64encode(rndpic)
      i = """<img src="data:image/png;base64,$(data)">"""
      html("<img src='data:image/png;base64,$(data)'>")
end

```

results in nothing, the image does not show.

---

<div class="post-metadata">

**Author:** ![Krastanov](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/krastanov/32/6817_2.png) [@Krastanov](https://discourse.julialang.org/u/Krastanov)\
**Post date:** [May 2, 2021, 8:59pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/7 "2021-05-02T20:59:09Z")

</div>

You have to encode the png stream. Instead, what you are doing is encoding some raw bitmap, which is not png, so the browser just sees some random data that can not be decoded. To do this properly, first create an in-memory file-like stream, “save” the image to that file-like object in a png format, then encode that file-like object into a base64 string.

---

<div class="post-metadata">

**Author:** ![stiven.roytman](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@stiven.roytman](https://discourse.julialang.org/u/stiven.roytman)\
**Post date:** [May 2, 2021, 11:12pm UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/8 "2021-05-02T23:12:09Z")

</div>

@sim, the html thing was my bad, I just didn’t import Genie.Renderer.Html.

I think I figured out the base64 thing.

```julia
using Genie.Router, Genie.Renderer.Html 
using FileIO, Images, ImageMagick, Base64

route("/") do
        randimage = rand(RGB, 1000, 1000)
        buffer = Base.IOBuffer()
        ImageMagick.save(Stream(format"PNG", buffer), randimage)
        data = base64encode(take!(buffer))
        close(buffer)
        html("""<img src="data:image/png;base64,$(data)">""")
end

```

Thank you @Krastanov, super useful, there’s no way I would’ve solved this on my own.

---

<div class="post-metadata">

**Author:** ![sim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sim/32/22207_2.png) [@sim](https://discourse.julialang.org/u/sim)\
**Post date:** [May 6, 2021, 8:58am UTC](https://discourse.julialang.org/t/simplest-way-to-display-a-picture-in-a-webapp-with-genie-jl/60387/9 "2021-05-06T08:58:29Z")

</div>

Thanks everyone, worked like a charm.