Using local image in "cards" shortcode

[allocgator]

How can I use a local image in the cards shortcode?

I have an SVG file in /static/ directory and tried using:

{{< cards >}}
  {{< card link="/" title="Image Card" image="/static/myfile.svg" subtitle="Unsplash Landscape" >}}
{{< /cards >}}

{{< cards >}}
  {{< card link="/" title="Image Card" image="myfile.svg" subtitle="Unsplash Landscape" >}}
{{< /cards >}}

but unable to see the image.

Do I need to store it somewhere else like /assets/ ?

[imfing]

Putting your images under static/myfile.svg, and then you can use them by /myfile.svg. If it's put under static/images/myfile.svg then it can be referenced by /images/myfile.svg.

The static folder is special because it serves as the root directory for unprocessed files in your Hugo or static site. In other words, any files you place in the static folder will be copied directly to the root of the generated public folder, without undergoing any further transformation or processing by Hugo.

The thing is, the leading slash in /myfile.svg is essential because it tells the browser to look for the file starting from the base URL of your site, ensuring it's picked up correctly no matter where it's referenced from.

[imfing]

Another method that doesn't require you to put all the images under static is use Page bundles. Page bundles let you organize your content files and associated resources together in the same directory.

For instance, you may have a project structure like this:

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

Then in that index.md file, you can access the my-image.jpg just using my-image.jpg, e.g. ![](my-image.jpg), same for the Card shortcode.
This way can help you better organize your content and associated resources under one place.