Replace Image Reference link

support
1

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)

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

However, hugo does not recognize this relative path. Hugo suggests using as below (reference) or with base url.

![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.

2

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

3

This is file relative path

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

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

![test](/i4str.png)

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

![test](./i4str.png)

OR

![test](i4str.png)
4

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?

5

My folder structure is like this:

📦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.

6

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

7

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.

8

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 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 was helpful.

Another workaround is to specify the typora-root-url in frontmatter (discussed here), but I prefer the render hooks.

1 Like