# Replace Image Reference link

**URL:** <https://discourse.gohugo.io/t/replace-image-reference-link/35314>\
**Category:** support\
**Created:** [October 26, 2021, 7:21am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314 "2021-10-26T07:21:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paari\_Vendhan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paari_vendhan/32/15467_2.png) [@Paari\_Vendhan](https://discourse.gohugo.io/u/Paari_Vendhan)\
**Post date:** [October 26, 2021, 7:21am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/1 "2021-10-26T07:21:24Z")

</div>

Dear Together

I am using hugo for my docs, in vscode. When I add image, I add as below, which I can also preview. The `assets` folder is in same level as parent folder of below file (and this varies for each md depending on its position)

```nohighlight
![test](../static/i4str.png)

```

However, hugo does not recognize this relative path. Hugo suggests using as below ([reference](https://gohugo.io/content-management/organization/)) or with base url.

```nohighlight
![test](/i4str.png)

```

However using above or with base-url both will fail to provide a preview for me in vscode, though it generates image successfully in served website.

Please suggest a workflow, where I could both preview and also generate hugo successfully. I am sure many of you might be using vscode and understandably with a preview option., so there should be workarounds derived already.

---

<div class="post-metadata">

**Author:** ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)\
**Post date:** [October 26, 2021, 7:29am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/2 "2021-10-26T07:29:52Z")

</div>

install the extension “Markdown Editor” in VS, has a nice preview, works with images

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [October 26, 2021, 8:15am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/3 "2021-10-26T08:15:11Z")

</div>

This is **file relative** path

```auto
![test](../static/i4str.png)

```

But, this one is **root relative path** , (served via server):

```auto
![test](/i4str.png)

```

* * *

If you want to refer image file located at the same level as current file (markdown), then try this:

```auto
![test](./i4str.png)

```

**OR**

```auto
![test](i4str.png)

```

---

<div class="post-metadata">

**Author:** ![Paari\_Vendhan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paari_vendhan/32/15467_2.png) [@Paari\_Vendhan](https://discourse.gohugo.io/u/Paari_Vendhan)\
**Post date:** [October 26, 2021, 8:59am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/4 "2021-10-26T08:59:43Z")

</div>

No, the problem is not the preview provider. Borrowing the semantics from @pamubay , the preview provider does not recognize hugo specific `root relative path` (RRP). This means RRP works in rendered website, but not in preview. Or you mean, the extension you mention recognizes that?

---

<div class="post-metadata">

**Author:** ![Paari\_Vendhan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paari_vendhan/32/15467_2.png) [@Paari\_Vendhan](https://discourse.gohugo.io/u/Paari_Vendhan)\
**Post date:** [October 26, 2021, 9:24am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/5 "2021-10-26T09:24:19Z")

</div>

My folder structure is like this:

```auto
📦docs
 ┣ 📂assets
 ┃ ┗ 📜i4str01.png
 ┣ 📂content
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜i4str02.png
 ┃ ┗ 📜_index.md

```

In `_index.md`, I could access `assets/i4str02.png`, both in preview and in hugo successfully, no problem.

But for accessing `i4str01.png`, if I use `/i4str01.png`, hugo will still refer successfully in rendered website, but markdown preview fails (as relative path is wrong). If I use `../assets/i4str01.png`, markdown preview works, but hugo fails to reach the image.

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [October 26, 2021, 10:36am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/6 "2021-10-26T10:36:23Z")

</div>

Yes, that’s correct behaviour in Hugo.

IIRC, Without creating any custom Markdown Render Hook template, to transform image reference link like this `../assets/i4str01.png` (Refer image under `assets` dir).

Markdown image references only works for anything under `static` or `content`

---

<div class="post-metadata">

**Author:** ![Paari\_Vendhan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paari_vendhan/32/15467_2.png) [@Paari\_Vendhan](https://discourse.gohugo.io/u/Paari_Vendhan)\
**Post date:** [October 27, 2021, 4:35am UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/7 "2021-10-27T04:35:58Z")

</div>

Yeah, a hook which can take the md file location as base location, and then navigate relatively to image location, and render that via hugo. Do we have any such hook already? I could not find one.

If that is available, I can have all assets in static folder outside content happily, enjoy markdown preview during edit, and successful hugo creation.

---

<div class="post-metadata">

**Author:** ![coupdegrisou](https://avatars.discourse-cdn.com/v4/letter/c/41988e/32.png) [@coupdegrisou](https://discourse.gohugo.io/u/coupdegrisou)\
**Post date:** [October 31, 2021, 4:34pm UTC](https://discourse.gohugo.io/t/replace-image-reference-link/35314/8 "2021-10-31T16:34:09Z")

</div>

I had this same struggle when I started, too (I use Typora instead of vscode, but image preview/markdown syntax is the same).

Things are working for me now with the [render-image and render-link markdown hooks](https://gohugo.io/getting-started/configuration-markup#render-hook-templates) that came with v. 0.62. I put the render-image.html and render-link.html files in my layouts\>\_default\>\_markup folder and reference the files using relative paths as normal.  
[This demonstration](https://github.com/bep/portable-hugo-links) was helpful.

Another workaround is to specify the typora-root-url in frontmatter (discussed [here](https://pakstech.com/blog/typora-review/)), but I prefer the render hooks.