Images not rendering locally, only with hard coded server url's

[makingStuff]

Hi all,

I’ve been plugging away at this for days.

Here is my env:

```

hugo v0.157.0-7747abbb316b03c8f353fd3be62d5011fa883ee6+extended+withdeploy linux/amd64 BuildDate=2026-02-25T16:38:33Z VendorInfo=gohugoio
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.26.0"
github.com/webmproject/libwebp="v1.6.0"
github.com/sass/libsass="3.6.6"

I have an issue where I am trying to render images, and, they only render if I hard code the server, similar to below (please note url redacted for privacy)

![](``http://67.xxx.xxx.xxx/knowledgebase/images/2016/02/desktop.jpg``)

That renders as html correctly, on my localhost deployment as:

http://localhost:1313/knowledgebase/desktop_9880364062115507149.jpg

I have my hugo.toml set to:

baseURL = ‘http://67.xxx.xxx.xxx/knowledgebase/’ # For server deployment

baseURL = ‘http://localhost:1313/knowledgebase/’ # Default for local development

languageCode = ‘en-au’
title = ‘Redacted for privacy’
contentDir = ‘content’
enableEmoji = true
copyright =	'20026 Redacted for privacy ’

[params]

[module]
[[module.imports]]
path = “github.com/colinwilson/lotusdocs”
disable = false
[[module.imports]]
path = “github.com/gohugoio/hugo-mod-bootstrap-scss/v5”
disable = false

[markup]
[markup.tableOfContents]
endLevel = 3
startLevel = 1
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true # https://jdhao.github.io/2019/12/29/hugo_html_not_shown/
[markup.goldmark.parser]
[markup.goldmark.parser.attribute]
block = true

relativeURLs = false
canonifyURLs = false
uglyURLs = false

colorScheme = “dark”

As you can see, I am using a theme for docs.

However, I need to have the images on my physical server for them to load like this.

I have tried so many variations, as shown here. Excuse how verbose it is. I was testing, trying to figure it out:

The below image has always worked:

Original with 67.xxx (renders as http://localhost:1313/knowledgebase/desktop_9880364062115507149.jpg)

![](http://67.xxx.xxx.xxx/knowledgebase/images/2016/02/desktop.jpg)



Adjusted 1: (this renders as nothing)

![](/knowledgebase/images/2016/02/desktop.jpg)



Adjusted 2: (this renders as nothing)

![](/images/2016/02/desktop.jpg

Adjusted 3: (this renders as nothing)

![](/public/images/2016/02/desktop.jpg)


So, trying a NEW image, that has never worked below:

Adjusted 1: (this renders as nothing)

![](http://67.xxx.xxx.xxx/knowledgebase/images/2026/03/reaction.gif)


Adjusted 2: (this renders as nothing)

![](/knowledgebase/images/2026/03/reaction.gif

Adjusted 3: (this renders as nothing)

![](/images/2026/03/reaction.gif

Adjusted 4: (this renders as nothing)

![](/public/images/2026/03/reaction.gif)


Another image… that exists, and is not a gif, but a png:

Adjusted 1 (renders as http://localhost:1313/knowledgebase/redacted-1024x717_8183639976758262139.png)

![](http://67.xxx.xxx.xxx/knowledgebase/images/2026/03/redacted-1024x717

Adjusted 2 (renders as nothing. It’s the GIF maybe?)

![](http://67.xxx.xxx.xxx/knowledgebase/images/2026/03/reaction.gif)


Another image, new gif, testing if file simply broken:

Adjusted 1 (renders as nothing)

![](http://67.xxx.xxx.xxx/knowledgebase/images/reaction2.gif)


Adjusted 2 (renders as nothing)

![](/public/images/reaction2.gif)

a png in the same location

Adjusted 1 (renders as nothing)

![](http://67.xxx.xxx.xxx/knowledgebase/images/test.png)


Adjusted 2 (renders as nothing)

![](/public/images/test.png

Adjusted 3 (renders as nothing)

![](/images/test.png)

Adjusted 4 (renders as nothing)
![](http://67.xxx.xxx.xxx/knowledgebase/images/test.png


Ahhh, the image HAS to be on the 67.xxx.xxx.xxx server to work! even though it’s rendering as localhost?!  WHAT?!  The below image renders as http://localhost:1313/knowledgebase/redacted-1024x717_8183639976758262139.png even though it’s on the server, and not local. WEIRD.
![](http://67.xxx.xxx.xxx/knowledgebase/images/2026/03/redacted-1024x717.png)

What I want, is to just say something like:

![](/images/test.png)

…and it renders to either my localhost, or the 67.xxx.xxx.xxx server, depending on where I deploy to.

Can anyone see what is happening, and what I’m doing wrong? I’m pulling my hair out. Thank you so much! Any advice greatly appreciated.

[chrillek]

Why do you have two baseURLs in you config? There should be only one, pointing to the base URL of you deployed site.

[makingStuff]

I have two but one of them is commented out as I’m just testing at the moment.

I assume a # is a comment?

[jmooring]

Where to place image files when using the Markdown content format

Background When reviewing support requests on this forum, we identify trends—the most frequent problems or questions. These trends represent opportunities for improvement, either in documentation or code. For example, a common mistake by new users is the placement of an index.md file instead of an _index.md file in the content root. This results in indeterminate behavior, a not-so-great user experience, and yet another support request. Although addressed in documentation for many years, we rece…

[makingStuff]

That is a fantastic read! Thank you for sharing, and sorry I had not seen that. That would have saved me some heartache.

OK, I moved my complete images structure to
/assets/images

That immediately fixed images that were being called like so:

![Alt text](/images/reaction.gif)

![Alt text](/images/2026/03/reaction.gif)

(note, the file DOES live in two locations, for testing purposes)

I then copied that file, into the .md file’s location, as I’d ideally like to use images for that document, that are in that folder, as per the instructions you posted.

So I have now, one of my folders for example:

├── _index.md
├── reaction.gif
├── setting-up-a-new-system.md
├── suggested-reading-for-new-staff.md
└── what-with-markdown.md

I am playing with what-with-markdown.md and have the following:

Below both work:

![Alt text](/images/reaction.gif)

![Alt text](/images/2026/03/reaction.gif)

Below fails:

![Alt text](reaction.gif)

![Alt text](/reaction.gif)

So, I am unsure of why the ![Alt text](reaction.gif)fails, when the file is there, and is being called appropriately, as far as I can tell.

Here is my .toml, if that helps?

# baseURL = 'http://67.xxx.xxx.xxx/knowledgebase/' # For server deployment
baseURL = 'http://localhost:1313/knowledgebase/' # Default for local development

languageCode = 'en-au'
title = 'Redacted Knowledgebase'
contentDir = 'content'
enableEmoji = true
copyright =	'20026 Redacted'

[params]

[module]
    [[module.imports]]
        path = "github.com/colinwilson/lotusdocs"
        disable = false
    [[module.imports]]
        path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
        disable = false

[markup]
    [markup.tableOfContents]
      endLevel = 3
      startLevel = 1
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true # https://jdhao.github.io/2019/12/29/hugo_html_not_shown/
  [markup.goldmark.parser]
    [markup.goldmark.parser.attribute]
      block = true
  [markup.goldmark.renderHooks.image]
    useEmbedded = 'fallback'
  [markup.goldmark.renderHooks.link]
    useEmbedded = 'fallback'


relativeURLs = false
canonifyURLs = false
uglyURLs = false

Thank you so much for your help. I very much appreciate how you pasted that.

[chrillek]

Don’t set your baseURL to localhost, not even for testing. It’s pointless!

And check in your browser’s developer tools what your browser is along as image path. That should tell you all you need to know.

[makingStuff]

Thank you, I did not realise RE the baseURL. Much appreciated.

I guess I could have mentioned this in the main post, but forgot.

It doesn’t actually render anything for HTML for the failing image.

For example, this .md :

Below both work:

![Alt text](/images/reaction.gif)

![Alt text](/images/2026/03/reaction.gif)

Below fails:

![Alt text](reaction.gif)

will output HTML as:

<p>Below both work:</p>
<p>
   
      <img src="/knowledgebase/images/reaction.gif" alt="Alt text" width="276" height="200" loading="lazy"> 

</p>
<p>
   
      <img src="/knowledgebase/images/2026/03/reaction.gif" alt="Alt text" width="276" height="200" loading="lazy">
 
</p>
<p>Below fails:</p>
<p>
 
</p>

You can see that there is no tag present. It simply doesn’t render anything. So it’s not a missing link or anything, it literally is not rendering.

That file (reaction.gif) IS in the same folder as the .md, as shown in the tree output, in my post above.

I am stumped!

[chrillek]

Then there’s perhaps an image render hook that is misbehaving. Hard to say without seeing the code

[irkode]

@makingStuff

[markup.goldmark.renderHooks.image]
    useEmbedded = 'fallback'

The theme has a image render hook in layouts/docs/_markup which imho does not support page resources. (lotusdocs/layouts/docs/_markup/render-image.html at release · colinwilson/lotusdocs · GitHub)

try to set useEmbedded = 'always' to overrule that. OFC this will affect how images are displayed, but if it’s rendered you have something to start with

---

another thing maybe, that the theme uses the old layout system (pre 0.146.0) and states 140.0 as required and you use 157… not sure if that may affect something in your case.

[jmooring]

@makingStuff

as per the instructions you posted

Your structure does not match this. If you want to use reaction.gif within the what-with-markdown page, then what-with-markdown must be a page bundle, and you must place the image within that bundle:

articles/
├── what-with-markdown/
│   ├── index.md
│   └── reaction.gif
├── _index.md
├── setting-up-a-new-system.md
└── suggested-reading-for-new-staff.md

And make sure you follow @irkode’s guidance:

[markup.goldmark.renderHooks.image]
useEmbedded = 'always'

[markup.goldmark.renderHooks.link]
useEmbedded = 'always'