How to insert image beside text in gradio?

šŸ”’ Gradio
1

Here is a the part of code of mine:

with gr.Blocks() as app2:
gr.HTML(ā€œimg src=ā€œimage linkā€ alt=ā€œA beautiful landscapeā€) #(ā€<>" left intentionally)
ā€¦

output:

image
image1366Ɨ547 21.6 KB

How can i make these images display?

Thanks

2

If the image file is on your local machine, youā€™ll need to put /file= before the filepath, which should be relative to (and contained in) the app working directory. For example:

with gr.Blocks() as demo:
  gr.Image("/file=cheetah.jpg")
  gr.Markdown("Some text")

demo.launch()
3

Also now in 4.0+, need to add the ā€œallowed_pathsā€ param to .launch(allowed_paths=[ā€œFile Nameā€]) so the file can be accessed.

4

I canā€™t get what youā€™re suggesting to work. Is anything needed beyond:

with gr.Blocks() as demo:
    gr.HTML("<img src='path/to/img.png'")
demo.launch(allowed_paths=['/path/to/img/parent/dir'])

Have attempted both relative and absolute paths on both.

5

You will need to do something like this: <img src='file/xxxxx.png' >

6

I may have had a typo in my example above, hereā€™s a full isolated example:

import gradio as gr

with gr.Blocks() as demo:
    gr.HTML("<img src='/home/firstlast/testapp/images/test.png'>")

demo.launch(allowed_paths=['/home/firstlast/testapp/images/'])

The code above still gives me:

image
image976Ɨ919 7.65 KB

Any idea what the problem might be? Iā€™m running the latest release of Gradio:

gradio==4.11.0
gradio_client==0.7.3
7

I believe that you need the word ā€˜fileā€™ to get it to consider the source local vs. a web URL.

8

Thanks for the continued assistance! Unfortunately, adding file didnā€™t help. Not sure what else the issue could be?

2 Likes