# How to insert image beside text in gradio?

**URL:** </static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%3E%5C
**Category:** 🔒 Gradio\
**Created:** [August 15, 2023, 8:19pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864 "2023-08-15T20:19:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chan55](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/chan55/32/18590_2.png) [@Chan55](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FChan55)%5C
**Post date:** [August 15, 2023, 8:19pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F1 "2023-08-15T20:19:20Z")

</div>

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](https://us1.discourse-cdn.com/hellohellohello/original/3X/1/f/1facd94a3feb7c2933d63717f43a2c46c43ed9c3.png)

How can i make these images display?

Thanks

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fabidlabs)%5C
**Post date:** [August 21, 2023, 1:25pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F2 "2023-08-21T13:25:18Z")

</div>

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:

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

demo.launch()

```

---

<div class="post-metadata">

**Author:** ![dwipper](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/dwipper/32/21750_2.png) [@dwipper](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fdwipper)%5C
**Post date:** [November 16, 2023, 1:58pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F3 "2023-11-16T13:58:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ZQ-Dev](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/zq-dev/32/22318_2.png) [@ZQ-Dev](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FZQ-Dev)%5C
**Post date:** [December 20, 2023, 10:04pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F4 "2023-12-20T22:04:26Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![dwipper](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/dwipper/32/21750_2.png) [@dwipper](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fdwipper)%5C
**Post date:** [December 21, 2023, 2:20am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F5 "2023-12-21T02:20:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ZQ-Dev](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/zq-dev/32/22318_2.png) [@ZQ-Dev](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FZQ-Dev)%5C
**Post date:** [December 21, 2023, 6:43pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F6 "2023-12-21T18:43:27Z")

</div>

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

```auto
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](https://us1.discourse-cdn.com/hellohellohello/original/3X/5/b/5bb0847b4a3657d364558d6e4e7102d0584bdf87.png)

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

```auto
gradio==4.11.0
gradio_client==0.7.3

```

---

<div class="post-metadata">

**Author:** ![dwipper](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/dwipper/32/21750_2.png) [@dwipper](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fdwipper)%5C
**Post date:** [December 21, 2023, 6:55pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F7 "2023-12-21T18:55:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ZQ-Dev](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/zq-dev/32/22318_2.png) [@ZQ-Dev](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FZQ-Dev)%5C
**Post date:** [December 27, 2023, 5:43pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-to-insert-image-beside-text-in-gradio%2F50864%2F8 "2023-12-27T17:43:57Z")

</div>

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