SOLVED: How do I reference a theme's images?

support
1

I want to use Hugo to generate documentation for different ‘customers’. Each customer will have their own styling, so it makes sense (to me) that they would each have a theme. The bulk of the content will be identical, but the images will vary (they are screenshots of a product that varies slightly for each customer).

I would expect that the right way to do this is to put the customer-specific images in the customer-specific theme, but I can’t see the “right” way to refer to the image from the markup. None of these work with the hugo-material-docs theme:

![](screen.png)
![](images/screen.png)
![](static/images/logo.png)

Is this possible, or do I have to do something with a custom shortcode?

Any advice appreciated!

Thanks
Kerry

2

Will each customer have their own configuration file (the config.toml file)? Or do you have a different way to identify the customer?

Unless you’re asking a different question. Your middle example is correct since items from static are copied to the same path.

![](/img/quickstart/bookshelf-bleak-theme.png)
3

Thanks for the fast reply!

I’ve just taken another look, and my mistake was simply that I had used a relative URL. Adding a leading slash fixes the problem:

![](/images/screen.png) NOT
![](images/screen.png)

… and yes, each customer will have their own configuration file.

Thanks again!

1 Like