3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): Rewrite markdown images section (#5064)

Browse source 
* Rewrite markdown images section

Before it looked like we have two ways to display images, now it's three ways. Each syntax has a separate example.

This way it's clear, I see each method and the code example.

Before there were 2 methods in a single code block.

* fix typo in `markdown-features/markdown-features-assets`

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* Rewrite image display section using CommonJS require

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* Rewrite image display section using ES imports

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* prettier doc

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Rami Yushuvaev 2021-06-30 16:27:44 +03:00 • committed by GitHub
parent 823b020c34
commit 9b9f38cd50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
website/docs/guides/markdown-features/markdown-features-assets.mdx
View file

@ -22,29 +22,29 @@ Let's imagine the following file structure:
## Images {#images} ## Images {#images}
You can use images in Markdown, or by requiring them and using a JSX image tag: You can display images in three different ways: Markdown syntax, JSX require or ES imports syntax.
Display images using simple Markdown syntax:
```mdx ```mdx
# My Markdown page ![Example banner](./assets/docusaurus-asset-example-banner.png)
```
Display images using inline CommonJS `require` in JSX image tag:
```mdx
<img <img
src={require('./assets/docusaurus-asset-example-banner.png').default} src={require('./assets/docusaurus-asset-example-banner.png').default}
alt="Example banner" alt="Example banner"
/> />
or
![Example banner](./assets/docusaurus-asset-example-banner.png)
``` ```
The ES imports syntax also works: Display images using ES `import` syntax and JSX image tag:
```mdx ```mdx
# My Markdown page
import myImageUrl from './assets/docusaurus-asset-example-banner.png'; import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="My image alternative text" /> <img src={myImageUrl} alt="Example banner" />
``` ```
This results in displaying the image: This results in displaying the image: