Have you ever encountered an issue with Hugo themes where an image (such as an avatar) isn’t being displayed correctly, even though the path appears to be correct in the config.toml file? In this blog post, we’ll dive into the problem and provide a solution to ensure your images are displayed correctly.

The Issue

When using a Hugo theme, you may encounter a situation where an image specified in your config.toml file isn’t being displayed as expected. The issue is usually related to how the theme handles the path to the image file. For example, the theme may be using the resources.GetMatch function, which looks for files only in the “assets” directory.

In our case, the avatar image was specified with a relative path in the config.toml file, but the theme was looking for the image in its own “assets” folder. This led to the image not being displayed on the website.

The Solution

To resolve this issue, follow these steps:

1. Move the image file (e.g., profile-picture.png) to the “assets” folder in your Hugo project.

2. Update the path to the image in your config.toml file.

This assumes that the image is now located directly in the “assets” folder.

3. Commit and push the changes to your repository. This ensures that the updated configuration and image location are used by any build systems (like GitHub Actions) during the build process.

By following these steps, you should be able to resolve the image path issue and have your images displayed correctly on your Hugo website.