# Image relative url at markdown format

**URL:** https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348
**Category:** support
**Created:** [April 18, 2024, 6:54am UTC](https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348 "2024-04-18T06:54:37Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Olopost](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/olopost/32/14678_2.png) [@Olopost](https://discourse.gohugo.io/u/Olopost)
#### Post date: [April 18, 2024, 6:54am UTC](https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348/1 "2024-04-18T06:54:37Z")

</div>

Hello Hugo community,

I will re-ask a question about markdown notation and relative image path.

Today to display image in Hugo website I write this part of code

```md
![my image](/my-image.png)

```

Image are put in `public` directory and everything is fine.

I wish to get relative image for non coder writer and image display during writing in their editor and I want to store image relative to markdown file like

```auto
|
content/
├─ article/
│ ├─ article.md
│ ├─ _images/
│ │ ├─ image.png

```

And syntax in article.md file are like

```md

my article, blah blah blah

![my image](_images/image.png)

```

Is it possible now with Hugo improvement, in which version 🙂  
If you need some tuning configuration have you an example ?

Thanks for your help !

---

<div class="post-metadata">

### Author: ![iaeiou](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/iaeiou/32/15332_2.png) [@iaeiou](https://discourse.gohugo.io/u/iaeiou)
#### Post date: [April 18, 2024, 7:03am UTC](https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348/2 "2024-04-18T07:03:18Z")

</div>

Hi @Olopost ,

did you check this similar topic?

- [Image path with relative URLs](https://discourse.gohugo.io/t/image-path-with-relative-urls/21970)

---

<div class="post-metadata">

### Author: ![Olopost](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/olopost/32/14678_2.png) [@Olopost](https://discourse.gohugo.io/u/Olopost)
#### Post date: [April 18, 2024, 7:14am UTC](https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348/3 "2024-04-18T07:14:04Z")

</div>

Yes, but I don’t clearly understand how to create/adapt render-image.html [(ticket)](https://github.com/gohugoio/hugo/issues/6545).  
I put in \_default/markup/render-image.html

```html
<p class="md__image">
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>

```

but not working

Have you some example that I can adapt ? maybe it’s only due to image are not copied with the html folder ?

---

<div class="post-metadata">

### Author: ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)
#### Post date: [April 18, 2024, 2:03pm UTC](https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348/4 "2024-04-18T14:03:44Z")

</div>

```plaintext
content/
├── posts/
│ ├── _index.md
│ ├── a.jpg
│ ├── post-1.md
│ └── post-2.md
└── _index.md

```

In the example above, a.jpg is not logically associated with either `post-1` or `post-2`. Instead, it is logically associated with the `posts` [branch bundle](https://gohugo.io/content-management/page-bundles/#branch-bundles), available as a [page resource](https://gohugo.io/content-management/page-resources/) for content/posts/\_index.md.

If you really want to use this markdown in `content/posts/post-1.md`…

```plaintext
![alt](a.jpg)

```

…you need to use an image render hook, starting with Hugo’s [embedded render hook](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html) as an example, then modify it to fall back to a parent page resource:

> **layouts/\_default/\_markup/render-image.html**
>
> ```plaintext
> {{- $u := urls.Parse .Destination -}}
> {{- $src := $u.String -}}
> {{- if not $u.IsAbs -}}
> {{- with or (.PageInner.Resources.Get $u.Path) (.PageInner.Parent.Resources.Get $u.Path) (resources.Get $u.Path) -}}
> {{- $src = .RelPermalink -}}
> {{- end -}}
> {{- end -}}
> {{- $attributes := merge .Attributes (dict "alt" .Text "src" $src "title" .Title) -}}
> <img
> {{- range $k, $v := $attributes -}}
> {{- if $v -}}
> {{- printf " %s=%q" $k $v | safeHTMLAttr -}}
> {{- end -}}
> {{- end -}}>
> {{- /**/ -}}
> 
> ```

  

The diff between the embedded image render hook and the example above is:

```diff
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 013e31235..34ecb4ebc 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,7 +1,7 @@
 {{- $u := urls.Parse .Destination -}}
 {{- $src := $u.String -}}
 {{- if not $u.IsAbs -}}
- {{- with or (.PageInner.Resources.Get $u.Path) (resources.Get $u.Path) -}}
+ {{- with or (.PageInner.Resources.Get $u.Path) (.PageInner.Parent.Resources.Get $u.Path) (resources.Get $u.Path) -}}
     {{- $src = .RelPermalink -}}
   {{- end -}}
 {{- end -}}

```

The above requires Hugo v0.125.0 or later.