Markdown文書のアセットフォルダから画像を参照する正しい方法（ローカルとJekyllの両方でレンダリングされます）？

Question

/assetフォルダーに保存されている画像を参照するための正しい方法はMarkdown文書で、ローカルで（Visual Studio Code）レンダリングできますが、Jekyllサイトにも展開できますか？

は、今のところ私はこのように私の画像が含まれています

![alt text]({{ site.url }}/assets/image.png)

これはサイトはジキルでレンダリングされている場合にのみ動作しsite.urlが正しく設定されている場合、これは_config.ymlがに応じて変更しなければならないことを意味しますJekyllプロジェクトが展開されている場所（ドメインのルートとサブフォルダの間）

しかし、これはではありません。はドキュメントをレンダリングすると、まったく動作しません。 Visual Studioコード。

​​

サブフォルダにジキルと展開したときの、もちろん動作しません。そこで私は、このオプションをhaev。

または私は完全に相対参照を使用することができます。

画像パスは、私は私のコンテンツファイルを持っている場所に依存して、非常に現実的ではない

![alt text](../assets/image.png)

。あるフォルダから別のフォルダにファイルを移動すると、画像のURLが変更されます。

Jekylとローカルレンダリング（Visual Studioコードなど）の両方を動作させる方法はありますか？

Answer 1

それはサブディレクトリを処理しない、すなわち、以下の方法では、baseurlをミス：

![alt text]({{ site.url }}/assets/image.png) 

それを修正するには、_config.ymlでbaseurlを持っているし、あなたのリンクでそれを使用します。

![alt text]({{ site.url }}/{{site.baseurl}}/assets/image.png) 

さらに良いです完全パスを生成するurlとbaseurlを含むabsolute_urlを使用してください。

![alt text]({{"/assets/image.png" | absolute_url}}) 

更新

コメントで説明したように、上記の解決策はVSCodeでは機能しませんが、相対パスの画像はありません。

それぞれのポスト/コレクションフォルダに画像を置いて相対パスで読み込むと、VSCodeは各ファイルの画像をレンダリングできるようになります。また、ジキルを幸せに保ちながら画像をレンダリングする必要があります。