Image Test

Using images in hbstack framework

This document provides a guide on how to use images in the hbstack framework, including various methods of rendering images in markdown files. Hugo provides two places to keep the images, one is in the static directory and another is in the assets directory. The images in the static directory are served as static files, while the images in the assets directory are processed by Hugo.

Images in Static Directory

You can use images from the static directory by referencing them directly in your markdown files. For example, if you have an image located at static/images/example.jpg, you can include it in your markdown file using three different methods:

Method 1 Using ![]() Syntax

1![Example Image](/images/example.jpg)

Method 2 Using figure Shortcode

1{{\< figure src="/images/example.jpg" alt="Example Image" caption="This is a captin of example image." >}}

1{{\< figure src="/images/example.jpg" alt="Example Image" width="300" height="200" caption="This is an example image." >}}

1{{\< figure src="/images/example.jpg" alt="Example Image" class="ma0 w-75" caption="This is an example image with Bootstrap styling." >}}

Images in Assets Directory

According to the Hugo documentation, you can also use images from the assets directory. The images in the assets directory are processed by Hugo, which means they can be optimized and transformed before being served.

Method 1 Using ![]() Syntax

1![Example Image](/assets/images/example.jpg)

Method 2 Using figure Shortcode

1{{\< figure src="/assets/images/example.jpg" alt="Example Image" caption="This is a caption of example image." >}}