Relative image paths in Hugo in markdowns files

support
1

Hi,

I’m used to use realative image links in my markdown files and normally I have no problem with them but when I try to render images locally with my new hugo powered blog I can’t get any image rendered right.

I have the following structure in my blog folder:

├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── about
│   │   └── about.md
│   └── posts
│       └── new-blog.md
├── data
├── img
│   └── new-blog
│       ├── hugo-first-run.png
│       ├── init-github-repo.png
│       ├── netlify-setup.png
│       └── type-writer.jpg
├── layouts
├── resources
├── static
└── themes
    └── coder
        ├── archetypes
        │   ├── default.md
        │   └── posts.md
        ├── assets
        │   └── scss
        │       ├── _base_rtl.scss
        │       ├── _base.scss
        │       ├── coder-rtl.scss
        │       ├── coder.scss
        │       ├── _content_rtl.scss
        │       ├── _content.scss
        │       ├── _footer.scss
        │       ├── _navigation_rtl.scss
        │       ├── _navigation.scss
        │       ├── _pagination.scss
        │       └── _variables.scss
        ├── exampleSite
        │   ├── config.toml
        │   ├── content
        │   │   ├── about.md
        │   │   └── posts
        │   │       ├── creating-a-new-theme.md
        │   │       ├── goisforlovers.md
        │   │       ├── hugoisforlovers.md
        │   │       ├── migrate-from-jekyll.md
        │   │       └── theme-demo.md
        │   ├── hugow
        │   ├── layouts
        │   └── static
        ├── images
        │   ├── logos
        │   │   ├── favicon.png
        │   │   ├── favicon.svg
        │   │   ├── logomark.png
        │   │   ├── logomark.svg
        │   │   ├── logotype-a.png
        │   │   ├── logotype-a.svg
        │   │   ├── logotype-b.png
        │   │   └── logotype-b.svg
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   ├── partials
        │   │   ├── 404.html
        │   │   ├── footer.html
        │   │   ├── header.html
        │   │   ├── home.html
        │   │   ├── list.html
        │   │   ├── page.html
        │   │   ├── pagination.html
        │   │   └── post.html
        │   └── posts
        │       └── single.html
        ├── LICENSE.md
        ├── Makefile
        ├── README.md
        ├── resources
        │   └── _gen
        │       └── assets
        │           └── scss
        │               └── scss
        │                   ├── coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.content
        │                   ├── coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json
        │                   ├── coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content
        │                   └── coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.json
        ├── static
        │   └── images
        │       ├── avatar.jpg
        │       ├── favicon-16x16.png
        │       └── favicon-32x32.png
        └── theme.toml

When I have a relative path like: ![alt text](img/hugo-first-run.png "Hugo first run")

I get no image at all, how do I need to chnage my image paths to get the images rendered right?

2

Render to /public and check the files … good luck :wink:

The images must be unter /static or you should use page bundles.

3 Likes
3

Thanks for the hint @ju52 :grinning: