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!

Peper

I also tried the method discussed in this post which works. Although I can live with that but it would be nice to know why markdown format is not working. – Peper

The second one should work: ![Test Image](/image.png). The first and the third one are wrong. – Car

Answer 1

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.

Housekeeping

Answer 2

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

Puffin

Answer 3

Even though I had the images inside my static directory, this wasn't working:

![Test Image](static/image.png)

The following did work though:

![Test Image](/image.png)

However, Hugo wasn't processing things until I did another hugo server -D. After that it worked. I think anytime you create a new directory then you have to restart the server...

Phyte