Issue loading image on my Hugo Site

Using Themes
1

Hi - I am new to Hugo. I am using the Hugo-Sustain theme which has been very handy to generate a website quickly.

Similar to the example site, I am storing my images under static/img directory. I am trying to call one of my images in a blog post (directory: content/blog/blog_post.md). To try and call the image I have tried the below with and without a leading slash:

![Image Description](img/renewable_city_small.png)

When I inspect the html or right click on the error icon displaying locally and on my webpage I am getting a 404 not found error. I have checked the spelling, file path, extension, etc. a million times. Am at a loss of how to get a simple image to display so any help would be much appreciated!

2

Hard to say without more information, but the destination should begin with a slash. What’s the baseURL for your project? Can you share your project repository?

4

Still not enough information…

5

oo yes, good call :slight_smile:

6

This is why I asked…
https://github.com/colinpaulish/cp_hugo_nz30/blob/main/config.toml#L1

You are serving your site from a subdirectory:

baseURL = "https://colinpaulish.github.io/cp_hugo_nz30/"

So this:

![white kitten](/images/kitten.jpg)

is resolved to this (incorrect)

https://colinpaulish.github.io/images/kitten.jpg

instead of this (correct):

https://colinpaulish.github.io/cp_hugo_nz30/images/kitten.jpg

This article explains the problem and offers a solution.

1 Like
7

Thank you so much. That worked. I very much appreciate it

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.