# Inserting images in Documentation doesn't work

**URL:** <https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582>\
**Category:** Tooling\
**Tags:** documentation, documenter\
**Created:** [February 1, 2024, 4:27pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582 "2024-02-01T16:27:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [February 1, 2024, 4:27pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/1 "2024-02-01T16:27:30Z")

</div>

I want to insert an image into my documentation markdown page in Julia. However, it does not respond to my HTML tag.

```julia
<img src="../../../src/assets/complex_plot.png" width="300" align="right"/>.

```

Also, if you open this link and press `edit`, you will see the image in a preview:  
[https://unfoldtoolbox.github.io/UnfoldMakie.jl/dev/](https://unfoldtoolbox.github.io/UnfoldMakie.jl/dev/)

What could be a problem?  
We use Literate and Documenter to create pages.

---

<div class="post-metadata">

**Author:** ![kellertuer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kellertuer/32/220707_2.png) [@kellertuer](https://discourse.julialang.org/u/kellertuer)\
**Post date:** [February 1, 2024, 4:42pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/2 "2024-02-01T16:42:20Z")

</div>

Thanks for linking the code, then I can hopefully directly help. The “problem” ist, that this is still considered Markdown in you md file, to mark that as `html` use a `raw` block as described in [Syntax · Documenter.jl](https://documenter.juliadocs.org/stable/man/syntax/#@raw-format-block)

The relative path might be a next problem, but that is not so easy to check without the image tag working.

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [February 1, 2024, 5:37pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/3 "2024-02-01T17:37:12Z")

</div>

Thanks! That is definitely a step forward! Now I see small image icons instead of tags.

However it couldn’t find the image. I tried:

````julia
```@raw html
<img src="../../../build/assets/complex_plot.png" width="300" align="right"/>

````

```julia
<img src="../../build/assets/complex_plot.png" width="300" align="right"/>

```

```julia
<img src="../build/assets/complex_plot.png" width="300" align="right"/>

```

```julia
<img src="build/assets/complex_plot.png" width="300" align="right"/>

```

```julia
<img src="../../../src/assets/complex_plot.png" width="300" align="right"/>

```

```julia

None of them worked

The link to a current version: https://unfoldtoolbox.github.io/UnfoldMakie.jl/previews/PR144/
```

---

<div class="post-metadata">

**Author:** ![kellertuer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kellertuer/32/220707_2.png) [@kellertuer](https://discourse.julialang.org/u/kellertuer)\
**Post date:** [February 1, 2024, 6:24pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/4 "2024-02-01T18:24:36Z")

</div>

That is what I expected and feared – so now your HTML is correct, but the relative path to the image does not work, the thing to have in mind (upon HTML inspection in my browser, thanks for the new PR link)

```julia
<img src="assets/complex_plot.png" width="300" align="right">

```

works since your index.html is in the main folder and then there is also direct the assets 🙂

---

<div class="post-metadata">

**Author:** ![goerz](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/goerz/32/3269_2.png) [@goerz](https://discourse.julialang.org/u/goerz)\
**Post date:** [February 1, 2024, 6:32pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/5 "2024-02-01T18:32:36Z")

</div>

One thing to be aware of is the warning about `prettyurls` towards the end of of the “[Building an Empty Document](https://documenter.juliadocs.org/dev/man/guide/#Building-an-Empty-Document)” section in the Documenter guide. In a nutshell, make sure to always use `prettyurls=true`, since the correct relative path will depend on the value of `prettyurls`.

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [February 1, 2024, 7:48pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/6 "2024-02-01T19:48:14Z")

</div>

Thank you very much! Now everything works!!! 🤩

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [February 1, 2024, 9:27pm UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/7 "2024-02-01T21:27:02Z")

</div>

Seems like I was too optimistic.  
Got another problem using Literate

The resulting page: [Plot Types · UnfoldMakie.jl](https://unfoldtoolbox.github.io/UnfoldMakie.jl/previews/PR144/generated/intro/plot_types/)

In a file plot\_types.jl I wrote

````julia
# ```@raw html

# <img src="../../../src/assets/dimensions.jpg" width="300"/>

# ```

# ```@raw html

# <img src="../../src/assets/dimensions.jpg" width="300"/>

# ```

# ```@raw html

# <img src="../src/assets/dimensions.jpg" width="300"/>

# ```

# ```@raw html

# <img src="/src/assets/dimensions.jpg" width="300"/>

# ```

# ```@raw html

# <img src="assets/dimensions.jpg" width="300"/>

# ```

````

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [February 2, 2024, 4:15am UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/8 "2024-02-02T04:15:02Z")

</div>

`dimensions.jpg` is located at the following URL.

`https://unfoldtoolbox.github.io/UnfoldMakie.jl/previews/PR144/assets/dimensions.jpg`

The URL for the page you linked is as follows.

`https://unfoldtoolbox.github.io/UnfoldMakie.jl/previews/PR144/generated/intro/plot_types/ `

Thus the relative URL should be [`../../../assets/dimensions.jpg`](https://unfoldtoolbox.github.io/UnfoldMakie.jl/previews/PR144/assets/dimensions.jpg).

---

<div class="post-metadata">

**Author:** ![vladdez](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vladdez/32/45806_2.png) [@vladdez](https://discourse.julialang.org/u/vladdez)\
**Post date:** [February 2, 2024, 9:14am UTC](https://discourse.julialang.org/t/inserting-images-in-documentation-doesnt-work/109582/9 "2024-02-02T09:14:49Z")

</div>

> [@mkitti](#):
>
> [`../../../assets/dimensions.jpg`](https://unfoldtoolbox.github.io/UnfoldMakie.jl/previews/PR144/assets/dimensions.jpg).

It works! Thank you very much!