diff --git a/docs/src/pages/guides/imports.md b/docs/src/pages/guides/imports.md index b239ff367e..7257a11059 100644 --- a/docs/src/pages/guides/imports.md +++ b/docs/src/pages/guides/imports.md @@ -99,6 +99,8 @@ import txtReference from './words.txt'; // txt === '/src/words.txt' All other assets not explicitly mentioned above can be imported via ESM `import` and will return a URL reference to the final built asset. This can be useful for referencing non-JS assets by URL, like creating an image element with a `src` attribute pointing to that image. +It can also be useful to place images in the `public/`-folder as explained on the [project-structure page](/core-concepts/project-structure/#public). + ## WASM ```js diff --git a/docs/src/pages/guides/markdown-content.md b/docs/src/pages/guides/markdown-content.md index aed8edcb75..07849182e0 100644 --- a/docs/src/pages/guides/markdown-content.md +++ b/docs/src/pages/guides/markdown-content.md @@ -116,6 +116,13 @@ For Markdown files, the `content` prop also has an `astro` property which holds > Keep in mind that the only guaranteed properties coming from the `content` prop are `astro` and `url`. +### Images and videos +Using images or videos follows Astro's normal import rules: + +- Place them in the `public/` as explained on the [project-structure page](/core-concepts/project-structure/#public) + - Example: Image is located at `/public/assets/img/astonaut.png` → Markdown: `![Astronaut](assets/img/astronaut.png)` +- Or use `import` as explained on the [imports page](/guides/imports#other-assets) (when using Astro's Markdown Component) + ## Astro's Markdown Component Astro has a dedicated component used to let you render your markdown as HTML components. This is a special component that is only exposed to `.astro` files. To use the `` component, within your frontmatter block use the following import statement: