Render images in the static directory

support
1

I’m trying to create a blog with Hugo, using the Ezhil theme. However, for some reason, the images in my static/images directory don’t seem to render.

In my content/posts/post1.md file, I have

![images](/images/space.jpeg)

{{< figure src="/images/space.jpeg" title="Space" >}}

But, only the alt text (images) is displayed for the first one, and only the title Space is displayed for the second one, and the original image (at static/images/space.jpeg) isn’t displayed.

Note - However, something like {{< figure src="https://avatars.githubusercontent.com/u/29385237?s=200&v=4" title="Hugo" >}} renders just fine.

When I run hugo server -D --disableFastRender and move the space.jpeg file out of and back into static/images, I get
File no longer exists in static dir, removing /images/space.jpeg
and
Syncing images/space.jpeg to /
respectively.

This makes me think that the files within the static directory ARE in fact getting tracked correctly, but then opening the respective file while running a live server instance doesn’t show the file.

Any advice in fixing this would be very helpful and much appreciated. Thanks!

2

Open your browser console and inspect the errors.

3

The console shows -
GET http://localhost:1313/images/space.jpeg 404 (Not Found).

But, the file does exist -

❯ ls static/images                                         
space.jpeg
4

Can you share your repository?

5

Sure. Here you go -

I’ve tried to have the image included in the post How to test dark mode?

Also if it helps, that the config.toml has favicon = "icons/myicon.png" and static/icons/myicon.png does exist, yet the icon doesn’t get rendered either.

6

Your baseURL is https://thazhemadam.github.io/blog/.

The theme attempts to handle this by placing this within the <body> element:

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

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

The <base> HTML element specifies the base URL to use for all relative URLs in a document.

So in your content file, do this:

![images](images/space.jpeg)
{{< figure src="images/space.jpeg" title="Space" >}}

Although it seems to work in Chrome, the <base> element belongs within <head> not within <body>.

7

That worked. Thank you!

8

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