How to Correctly Reference Images?
There are several ways to reference images in Hugo, depending on where the image is stored and how you want to reference it. Here are some common methods:
1. Image in the Same Folder
If your image is in the same folder as the markdown file, you can directly use a relative path to reference the image. For example, if your article and image are in the same folder, you can reference the image like this:
Here, image.jpg is the image in the same folder as your markdown file.
2. Image in a Different Folder
If the image is stored in a different folder, you usually reference it based on the folder structure. Assuming the image is stored in the static/images/ directory, you can reference it like this:
In this case, /images/image.jpg is the path relative to the root directory of the site, and Hugo will automatically map the content in the /static/ directory to the root of the website.
3. Relative vs Absolute Paths
- Relative Path: For example,
images/image.jpg, this is a path relative to the current document or folder. - Absolute Path: For example,
/images/image.jpg, this path is relative to the/static/directory, which is typically used for referencing static resources.