How to insert image beside text in gradio?

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:

How can i make these images display?

Thanks

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()

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

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.

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

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:

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

gradio==4.11.0
gradio_client==0.7.3

I believe that you need the word ‘file’ to get it to consider the source local vs. a web URL.

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

1 Like