
[Next.js](https://nextjs.org/)にてローカルに置いているmarkdownからローカルに置いている画像を参照する方法について調べた。

## 環境

- 画像の配置場所
  ```shell
  $ # プロジェクトルートディレクトリ下のpublicディレクトリ下
  $ tree public/
  public/
  └── images
      └── profile_cat.jpg
  ```
- markdownの配置場所
  ```bash
  $ # プロジェクトルートディレクトリ下ならいづこでも可
  $ tree posts/
  posts/
  └── example.md
  ```

## 方法

public下のディレクトリへのパスを記述する。

```markdown:example.md
![profile image](/images/profile_cat.jpg)
```

![profile image](/images/profile_cat.jpg)

[Image](https://nextjs.org/docs/pages/api-reference/components/image)コンポーネントを使う時と同じである。

```jsx
<Image
    src="/images/profile.jpg"
    ...
/>
```


<p><a href="https://nextjs.org/">Next.js</a>にてローカルに置いているmarkdownからローカルに置いている画像を参照する方法について調べた。</p>
<h2>環境</h2>
<ul>
<li>画像の配置場所
<pre><code class="language-shell">$ # プロジェクトルートディレクトリ下のpublicディレクトリ下
$ tree public/
public/
└── images
    └── profile_cat.jpg
</code></pre>
</li>
<li>markdownの配置場所
<pre><code class="language-bash">$ # プロジェクトルートディレクトリ下ならいづこでも可
$ tree posts/
posts/
└── example.md
</code></pre>
</li>
</ul>
<h2>方法</h2>
<p>public下のディレクトリへのパスを記述する。</p>
<pre><code class="language-markdown:example.md">![profile image](/images/profile_cat.jpg)
</code></pre>
<p><img src="/images/profile_cat.jpg" alt="profile image"></p>
<p><a href="https://nextjs.org/docs/pages/api-reference/components/image">Image</a>コンポーネントを使う時と同じである。</p>
<pre><code class="language-jsx">&#x3C;Image
    src="/images/profile.jpg"
    ...
/>
</code></pre>


Next.jsのプロジェクトにおいてマークダウン内からローカルの画像を表示する方法について紹介します。

TAKEO

マークダウンにてpublic下の画像を表示する方法(Next.js)

環境

方法