From ead7c06a9044da8ca39042de04c3a8a17a1565af Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 30 Oct 2025 17:59:33 +0000 Subject: [PATCH 1/3] Add clarification about using / for image paths relative to fern folder root Co-Authored-By: Devin Logan --- .../component-library/writing-content/markdown.mdx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/fern/products/docs/pages/component-library/writing-content/markdown.mdx b/fern/products/docs/pages/component-library/writing-content/markdown.mdx index 20a8e46f0..8d71d64d4 100644 --- a/fern/products/docs/pages/component-library/writing-content/markdown.mdx +++ b/fern/products/docs/pages/component-library/writing-content/markdown.mdx @@ -96,6 +96,16 @@ Common image attributes: 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). +### Image paths + +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`: + +```markdown +![Overview](/assets/images/overview.png) +``` + +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. + ## Embedding local assets You can embed local assets in your Markdown pages using the [`` component](/learn/docs/content/components/embed). This is useful for displaying PDFs, images, videos, OpenAPI files, and other assets into your docs. From 36949994dfc9de4532d80cd0ff93b58950f8e2c1 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Thu, 30 Oct 2025 14:34:13 -0400 Subject: [PATCH 2/3] minor edits for clarity --- .../writing-content/markdown.mdx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/fern/products/docs/pages/component-library/writing-content/markdown.mdx b/fern/products/docs/pages/component-library/writing-content/markdown.mdx index 8d71d64d4..b2b355875 100644 --- a/fern/products/docs/pages/component-library/writing-content/markdown.mdx +++ b/fern/products/docs/pages/component-library/writing-content/markdown.mdx @@ -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 [`` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to insert the image. + + 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`. + + ```markdown - ![Alt text](./path/to/image.png "Optional title") + + ![Alt text](../../assets/images/logo.png "Optional title") + + + ![Overview](/assets/images/logo.png) ``` ```html - + + + + + ``` @@ -96,16 +108,6 @@ Common image attributes: 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). -### Image paths - -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`: - -```markdown -![Overview](/assets/images/overview.png) -``` - -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. - ## Embedding local assets You can embed local assets in your Markdown pages using the [`` component](/learn/docs/content/components/embed). This is useful for displaying PDFs, images, videos, OpenAPI files, and other assets into your docs. From e335de29ea70738e01061a74546762f718cbf885 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Thu, 30 Oct 2025 14:38:45 -0400 Subject: [PATCH 3/3] nit --- .../docs/pages/component-library/writing-content/markdown.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fern/products/docs/pages/component-library/writing-content/markdown.mdx b/fern/products/docs/pages/component-library/writing-content/markdown.mdx index b2b355875..889090b05 100644 --- a/fern/products/docs/pages/component-library/writing-content/markdown.mdx +++ b/fern/products/docs/pages/component-library/writing-content/markdown.mdx @@ -80,7 +80,7 @@ You can use locally stored images or URLs to include images in your Markdown pag ![Alt text](../../assets/images/logo.png "Optional title") - ![Overview](/assets/images/logo.png) + ![Alt text](/assets/images/logo.png "Optional title") ```