Skip to content

Add clarification about using / for image paths relative to fern folder root #1627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 30, 2025
Merged

Add clarification about using / for image paths relative to fern folder root #1627

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ead7c06
Add clarification about using / for image paths relative to fern fold…
devin-ai-integration[bot] Oct 30, 2025
3694999
minor edits for clarity
devalog Oct 30, 2025
e335de2
nit
devalog Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions fern/products/docs/pages/component-library/writing-content/markdown.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,15 +69,27 @@ Read the [Introduction](/learn/overview/introduction).

You can use locally stored images or URLs to include images in your Markdown pages. Use either [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images-1) or the [`<img>` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to insert the image.

<Info title="Image paths">
You can reference images using paths relative to the page's location (using `./` or `../`) or relative to the `fern` folder root (using `/`). For example, an image at `fern/assets/images/logo.png` can be referenced from any page as `/assets/images/logo.png`.
</Info>

<Tabs>
<Tab title="Markdown">
```markdown
![Alt text](./path/to/image.png "Optional title")
<!-- Relative to page location -->
![Alt text](../../assets/images/logo.png "Optional title")

<!-- Relative to fern folder root -->
![Alt text](/assets/images/logo.png "Optional title")
```
</Tab>
<Tab title="HTML">
```html
<img src="../assets/images/overview.png" width="500px" height="auto" />
<!-- Relative to page location -->
<img src="../../assets/images/logo.png" width="500px" height="auto" />

<!-- Relative to fern folder root -->
<img src="/assets/images/logo.png" width="500px" height="auto" />
```
</Tab>
</Tabs>
Expand Down