# Can't get images working on github pages

**URL:** <https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120>\
**Category:** support\
**Tags:** images\
**Created:** [March 27, 2025, 6:24pm UTC](https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120 "2025-03-27T18:24:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![FreeSlave](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freeslave/32/24217_2.png) [@FreeSlave](https://discourse.gohugo.io/u/FreeSlave)\
**Post date:** [March 27, 2025, 6:24pm UTC](https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120/1 "2025-03-27T18:24:53Z")

</div>

The repo in question is [GitHub - FreeSlave/halflife-featureful: Half-Life SDK for making mods upon it](https://github.com/FreeSlave/halflife-featureful)

The hugo files are at the “documentation” subfolder.

I followed the “Host on GitHub Pages” guide

I had to add `working-directory` in some places of github workflow .yaml because I want to generate the documentation from the subfolder.

The website is deployed fine, but images don’t work. E.g. the image on this page doesn’t show [Player inventory | Featureful SDK](https://freeslave.github.io/halflife-featureful/docs/configuration/player-inventory/)

If I prepend the repo name to the image url in browser, it shows the image.

I did a lot of searching and this problem is quite well-known indeed. I did change baseURL in hugo.toml (though it probably shouldn’t matter as it’s specified in the build stage in github workflow. Considering it’s doing the correct job of course)

I also tried render hooks as suggested in the issue 51033 on this discourse (can’t post more than 2 links, so I had to go by topic number)

```auto
[markup.goldmark.renderHooks]
      [markup.goldmark.renderHooks.image]
        enableDefault = true
      [markup.goldmark.renderHooks.link]
        enableDefault = true

[module]
  [[module.mounts]]
    source = 'assets'
    target = 'assets'

  [[module.mounts]]
    source = 'static'
    target = 'assets'

```

but with no success. So now I’m kinda lost.

I guess I could prepend every image with `/halflife-featureful` but is it the right apporach?

Considering there’re so many topics with this problem maybe it should be explicitly addressed in the tutorial with the correct solution (searching for this problem gives mixed answers which confuses even more)

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [March 27, 2025, 7:15pm UTC](https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120/2 "2025-03-27T19:15:29Z")

</div>

You are using the _hugo-book_ theme. This provides it’s own image render hook

`themes\hugo-book\layouts\_default\_markup\render-image.html`

looks like this is NOT the default mentioned in [5113](https://discourse.gohugo.io/t/markdown-images-get-wrong-url/51033/2)

The default one is here: [hugo/tpl/tplimpl/embedded/templates/\_default/\_markup/render-image.html at master · gohugoio/hugo · GitHub](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html)

Copy the content to your `layouts/_default/_markup/render-image.html`  
Now the image shows up - so your general config is correct.

Check if it breaks other images on the site, logos…, maybe provided by the theme.  
If somethings wrong, you’ll have to compare and adjust the code to support both.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 27, 2025, 7:31pm UTC](https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120/3 "2025-03-27T19:31:59Z")

</div>

Do the same thing with the link render hook, and reduce your `markdown` config to:

```plaintext
[markup.goldmark.renderer]
unsafe = true

```

The best config file is the smallest possible config file.

Also, now that you are using the default link and image render hooks, there is no need to use the `relref` shortcode.

Replace things like this:

```plaintext
[env_global]({{< relref "env_global.md" >}})

```

With this:

```plaintext
[env_global](entities/env_global)

```

With the above, use a path relative to the current page, or a path relative to the `contentDir`.

* * *

Related proposal: [https://github.com/gohugoio/hugo/issues/13535](https://github.com/gohugoio/hugo/issues/13535)

---

<div class="post-metadata">

**Author:** ![FreeSlave](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freeslave/32/24217_2.png) [@FreeSlave](https://discourse.gohugo.io/u/FreeSlave)\
**Post date:** [March 27, 2025, 8:34pm UTC](https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120/4 "2025-03-27T20:34:32Z")

</div>

Thank you very much for your answers. I took render-link.html and render-image.html from hugo and it works now.

I couldn’t think the theme would be a culprit. I gotta learn much more about Hugo

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 29, 2025, 8:34pm UTC](https://discourse.gohugo.io/t/cant-get-images-working-on-github-pages/54120/5 "2025-03-29T20:34:59Z")

</div>

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