Add image to hugo site

In Hugo, you can add images to your page in several ways depending on where your images are stored. Here are the main methods:

1. Using Page Bundles (Recommended)

If you’re using page bundles, place the image inside the same folder as your markdown file.

Steps:

1. Place the image inside the same directory as the markdown file:

   content/posts/my-post/
   ├── index.md
   ├── my-image.jpg
   

2. In index.md, reference the image using:

   ![Alt text](my-image.jpg)
   

   or

   ![Alt text](/posts/my-post/my-image.jpg)
   

2. Using the static/ Directory

If you prefer to store images globally, place them in the static/ directory.

Steps:

1. Place your image in:

   static/images/
   

2. Reference the image in your markdown file:

   ![Alt text](/images/my-image.jpg)
   

3. Using Hugo Shortcodes for More Control

Hugo provides a built-in figure shortcode for more control (e.g., adding captions).

If the image is in static/images/, use:

4. Using Markdown with Absolute URLs

If your image is hosted externally (e.g., on a CDN or image hosting service), use:

![Alt text](https://example.com/path/to/image.jpg)

5. Using HTML for More Customization

For more control (e.g., setting custom sizes):

<img src="/images/my-image.jpg" alt="Alt text" width="600">

Which Method to Use?

• For blog posts: Use Page Bundles (content/posts/my-post/index.md).
• For global images: Use the static folder (static/images/).
• For captions and styling: Use Hugo shortcodes.
• For external images: Use absolute URLs.

Let me know if you need further help! 🚀