Cannot link to static files with Hugo

7.9k Views Asked by nalzok At 04 April 2025 at 14:20

I have this in config.toml:

baseURL = "https://my-username.github.io/blog/"

and there is a static file at static/img/foo.png.

Now, in content/posts/bar.md, I have the following content:

---
title: "Bar"
---

![foo](img/foo.png)

The picture isn't showing after I started the hugo server, so I inspected elements, and found out that Hugo generated the following URL for it:

http://localhost:1313/blog/posts/bar/img/hireme.png

This is not what I expect; it should be

http://localhost:1313/blog/img/hireme.png

When I use ![foo](/blog/img/foo.png), the picture is displayed correctly, but this is quite strange: /blog/ is part of baseURL, why do I need to type it again?

Original Q&A

There are 2 best solutions below

Dian On 12 September 2017 at 15:39

I think you should use <base> tag to make baseURL for static files.

Add the <base> tag into <head>:

<base href="{{ .Site.BaseURL }}">

And then you can insert image in post like this:

![Foo image](img/foo.jpg)

References:

Scriptonomy On 03 October 2017 at 20:06

In a simple setup where your site lives in the domain's root, a absolute reference to the image would be a standard practice. However, in your case where the site is nested, a more crafty solution is necessary.

I suggest using a shortcode to solve your dilemma. Just simply create a shortcode that takes in a resource file path and spits out the desired absolute path every time. The advantage to this approach is flexibility for future resource relocation to a cdn for example.

Your markdown code will be something like this: ![foo]({{< resource url="img/foo.png" >}})

Your shortcode template will be something like this: {{ .Site.BaseURL }}{{ .Get "url" }}

Create a file named 'resource.html' in 'layouts/shortcodes/' folder, and drop in the shortcode template code above.

So when you decide you want to switch to a cdn you could easily do this: ://cdn.example.com/{{ .Get "url" }}

Cannot link to static files with Hugo

There are 2 best solutions below

Related Questions in TEMPLATES

Related Questions in URL

Related Questions in CONTENT-MANAGEMENT-SYSTEM

Related Questions in STATIC-FILES

Related Questions in HUGO

Trending Questions

Popular # Hahtags

Popular Questions