3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 16:59:06 +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}
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
# My Markdown page
![Example banner](./assets/docusaurus-asset-example-banner.png)
```
Display images using inline CommonJS `require` in JSX image tag:
```mdx
<img
src={require('./assets/docusaurus-asset-example-banner.png').default}
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
# My Markdown page
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: