Skip to content

Commit ead7c06

Browse files
Add clarification about using / for image paths relative to fern folder root
Co-Authored-By: Devin Logan <[email protected]>
1 parent a7b0968 commit ead7c06

File tree

1 file changed

+10
-0
lines changed
  • fern/products/docs/pages/component-library/writing-content

1 file changed

+10
-0
lines changed

fern/products/docs/pages/component-library/writing-content/markdown.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,16 @@ Common image attributes:
9696
For more details about the HTML image element and its attributes, see the [MDN documentation on the img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img).
9797
</Note>
9898

99+
### Image paths
100+
101+
When referencing images, you can use either relative paths (`./` or `../`) or paths relative to the root of the `fern` folder by using `/`. For example, if you have an image at `fern/assets/images/overview.png`, you can reference it from any page using `/assets/images/overview.png`:
102+
103+
```markdown
104+
![Overview](/assets/images/overview.png)
105+
```
106+
107+
This is equivalent to using a relative path like `../../assets/images/overview.png`, but is more concise and doesn't depend on the current page's location in the folder structure.
108+
99109
## Embedding local assets
100110

101111
You can embed local assets in your Markdown pages using the [`<embed>` component](/learn/docs/content/components/embed). This is useful for displaying PDFs, images, videos, OpenAPI files, and other assets into your docs.

0 commit comments

Comments
 (0)