Images are not getting displayed in the published site. The images are reffering localhost://1313 instead of the website URL

Hello,

I am using hugo for technical documentation with Docsy theme. baseURL=“/”

I have the images in the static/img folder and in the content/docs/topic.md file I use it-

![Login](img/login-page.png)

Also there is a index.md file in the /img folder.

Is this the right way?

This works fine in the localhost. But in the published site the images are not displayed.

Get the following error

Not sure what is the issue. So far tried making baseURL=" "

‘realtivePath=true’

Any help appriciated.

First, neither “/” nor “” are valid baseURLs. The baseURL must conform to the documented pattern:
https://gohugo.io/getting-started/configuration/#baseurl

Second, if the image is only used for “topic”, you are better off by using a leaf bundle…

content/
└── docs/
    └── topic/
        ├── index.md
        └── login-page.png

…with this Markdown:

![Login](login-page.png)

If the image is used on many pages, I would place it in the assets directory…

assets/
└── images/
    └── login-page.png

… and then enable the embedded image render hook in your site configuration to properly resolve the Markdown destination:

[markup.goldmark.renderHooks.image]
enableDefault = true

The Markdown would look like this:

![Login](images/login-page.png)

Using the render hook makes everything just work, even if your baseURL includes a subdirectory.

Thanks @jmooring , will give the render hook a try.

Regarding the baseURL- I have multiple sites, like staging and prod and both have different uRLs. Not sure how to add both of those or how to deal with this scenario.

Use a config directory instead of a config file in the project root, and create a subdirectory for each environnment:

config/
├── _default/
│   └── hugo.toml
├── production/
│   └── hugo.toml
└── staging/
    └── hugo.toml

https://gohugo.io/getting-started/configuration/#configuration-directory

Created config folder and added the respective files. I just have one confusion. For default config, do I add prod URL or local host. Sorry if this is very obvious.

Your default config will be used when running hugo server because you have not created a development directory within the config directory… and that’s fine.

For the _default/config use your production baseURL. This is really important if your production site is served from a subdirectory, e.g.,

baseURL = 'https://example.org/docs/'
1 Like

Took you advise and removed the img folder as it was not necessary and took the leaf bundle approach. Added the baseurl to my production site url.

Used this in md file

![Login](login-page.png)

Now when I run hugo serve in the Localhost I get the following error

Please share your project repository. It will make troubleshooting infinitely easier and more efficient (i.e., less of my time).

Apologies, I would if i could. I appreciate your time. I will do some more debugging. Thank you so much.

Well turned out the issue was not with the what I had done. But with the docker file config. The environments were not configured properly hence the missing images.

But I fixed the base URL as per the suggestions here and learned a lot in the process. Thank you for the help.