西安Linux用户组(Xi'an Linux User Group)

- Example Site: http://xalug.com/docs/example/
- Table of Contents: http://xalug.com/docs/example/table-of-contents/
- With ToC: http://xalug.com/docs/example/table-of-contents/with-toc/
- Without ToC: http://xalug.com/docs/example/table-of-contents/without-toc/
- 3rd Level: http://xalug.com/docs/example/collapsed/3rd-level/
- 4th Level: http://xalug.com/docs/example/collapsed/3rd-level/4th-level/
- Asciinema: http://xalug.com/docs/shortcodes/asciinema/
- Buttons: http://xalug.com/docs/shortcodes/buttons/
- Columns: http://xalug.com/docs/shortcodes/columns/
- Details: http://xalug.com/docs/shortcodes/details/
- Badges: http://xalug.com/docs/shortcodes/experimental/badges/
- Cards: http://xalug.com/docs/shortcodes/experimental/cards/
- Images: http://xalug.com/docs/shortcodes/experimental/images/
- Hints: http://xalug.com/docs/shortcodes/hints/
- Mermaid: http://xalug.com/docs/shortcodes/mermaid/
- Steps: http://xalug.com/docs/shortcodes/steps/
- Tabs: http://xalug.com/docs/shortcodes/tabs/
- KaTeX: http://xalug.com/docs/shortcodes/katex/

# Images

> [!WARNING]
> Experimental, could change in the future or be removed

Image shortcode produces an image that can be clicked to expand.

## Example

```go-html-template
{{</* image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" */>}}
```
{{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}}

## Parameters

`src` {{< badge style="warning" title="Required" >}}
: The link to the image

`class` {{< badge style="info" title="Optional" >}}  
: An optional CSS class name that will be applied to the `img` element

`alt` {{< badge style="info" title="Optional" >}}  
: An optional alternate text for the image

`title` {{< badge style="info" title="Optional" >}}  
: An optional title for the image

`loading` {{< badge style="info" title="Optional" >}}  
: Sets `loading` control for the image: `lazy`, `eager` or `auto`