hugo server not rendering images from static folder

Question

I have just built a portfolio website with hugo. Everything is working as expected except the blog posts are not rendering images that I placed in static folder. I was originally using 0.16 version of hugo. Updating to the latest (0.31) did not help.

I tried several formats in my blog post markdown:

+++
date = "2017-12-29T05:14:00-06:00"
draft = false
title = "test"

+++
This is a test post for images.

![Test Image](image.png)
![Test Image](/image.png)
<img src = "/static/image.png">

I would appreciate any suggestions!

Answer 1

you may put your picture with the path your site/content/post/[your folder]/your_picture.png, and use it like . If this helps all glory goes to https://github.com/kakawait/hugo-tranquilpeak-theme/issues/268#issuecomment-383766535

Answer 2

The reason behind such behavior is how Hugo renders pages and site content, especially /static folder, which is described in Hugo docs: https://gohugo.io/content-management/static-files/

/static folder is considered as global storage for all site's static content, e.g. images, stylesheets, scripts and so on. So after rendering Hugo puts them straight into the root of your website.

While path /static/image.png makes perfect sense while editing site contents, after rendering Hugo can not locate stated file and your images do not show up. Then the correct way to include images from /static folder into your post is following:

![Test Image](/image.png)
<img src = "/image.png">

However, the better way would be not to place images for your posts to /static folder, but to organize page bundle: https://gohugo.io/content-management/page-bundles/ The way, which xiaojueguan suggested in previous answer.