マークダウンでローカル画像を表示する方法


141

私はマークダウンで以下を試しますが、うまくいかないようです、誰もがマークダウンでローカル画像を表示する方法を知っていますか?そのためにウェブサーバーをセットアップしたくありません。ありがとう

![image](files/Users/jzhang/Desktop/Isolated.png)

回答:


108

パスが正しくないと思われます。user7412219で述べたように、ubuntuとwindowsはパスの扱い方が異なります。画像をノートブックと同じフォルダに入れて使用してみてください:

![alt text](Isolated.png "Title")

Windowsでは、デスクトップはC:\ Users \ jzhang \ Desktopにあるはずです。


5
「タイトル」とは何ですか?
niCk cAMel

6
@niCkcAMel「タイトル」は、画像の上にマウスを置いたときに表示されるものです。「代替テキスト」は、画像を表示できない場合に表示されるものです。
クリス

2
「同じファイルに画像を入れてみてください」:それはファイル -> フォルダであるべきですか?
パトリック

59

以下は、ドキュメントの横のサブフォルダーへの画像への相対パスで機能します(現在、Windowsシステムでのみテストされています)。

![image info](./pictures/image.png)

1
最良の答えである私見は、GitHubマークダウンファイルを希望の方法で処理します。
Erich Kuester

ベストアンサー!
Zahra Taheri

21

最善の解決策は、mdドキュメントが配置されているフォルダへの相対パスを提供することです。

おそらく、ブラウザがローカルファイルの絶対パスを解決しようとしたときに問題が発生しています。これは、Webサーバーを介してファイルにアクセスすることで解決できますが、その場合でも、画像のパスは正しい必要があります。

ドキュメントの同じレベルにフォルダを置き、すべての画像を含めることは、最もクリーンで安全なソリューションです。GitHub、ローカル、ローカルウェブサーバーに読み込まれます。

images_folder/img.jpg  < works


/images_folder/img.jpg  < this will work on webserver's only (please read the note!)

絶対パスを使用すると、次のようなURLでのみ画像にアクセスできます。 http://hostname.doesntmatter/image_folder/img.jpg


1
「最善の解決策は、mdドキュメントが配置されているフォルダへの相対パスを提供することです。」の+1 それは私のローカルマシン上の画像を示しました。
MasterJoe

17

ステップバイステップ:

  1. Imagesのような名前のディレクトリを作成し、Markdownによってレンダリングされるすべての画像を配置します。

  2. たとえば、example.pngImagesに入れます

  3. 以前にImagesディレクトリの下にあった example.pngをロードするため。

![title](Images/example1.png)

画像ディレクトリは、.md拡張子が付いたマークダウンテキストファイルと同じディレクトリにある必要があります。


その「画像」フォルダのパスは何ですか?vscodeの構成に追加しましたか?
K_dev

1
@K_dev "images"ディレクトリは、拡張子が ".md"のマークダウンテキストファイルと同じディレクトリに配置する必要があります。vscodeに構成を追加していません。
nevzatseferoglu

14

マークダウンファイルに画像を追加するには、.mdファイルと画像が同じディレクトリにある必要があります。私の場合と同様に、私の.mdファイルはdocフォルダーにあったので、画像も同じフォルダーに移動しました。その後、.mdファイルに次の構文を書き込みます

![alt text](filename)

お気に入り ![Car Image](car.png)

これでうまくいきました。


7

ローカル画像を追加すると、次のように機能しました: ![alt text](file://IMG_20181123_115829.jpg)

なけれfile://接頭それは(MarkdownViewer ++アドオンとWin10、メモ帳++)の仕事をしませんでした

編集:私はそれがhtmlタグでも機能することを発見しました、そしてそれははるかに優れています: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2:Atomエディターでfile://プレフィックスなしでのみ機能します。なんてめちゃくちゃ。


3

私の知る限り、Linux上のVSCodeの場合、ローカルイメージは通常、.mdポストファイルと同じフォルダーにイメージを配置した場合にのみ表示できます。
つまり、![](image.jpg)またはのみ![](./image.jpg)動作します。
のような絶対パスで![](/home/bala/image.jpg)も機能しません。


3

編集:

私のために働いている(ローカルイメージのために)

![system schema](doc/systemDiagram.jpg)

 tree
 ├── doc
     └── jobsSystemSchema.jpg
 ├── README.md

マークダウンファイルREADME.mdは、docディレクトリと同じレベルにあります。

あなたの場合、あなたのマークダウンファイルはディレクトリファイルと同じレベルでなければなりません。

私のために働いています(生のパスを持つ絶対URL)

![system schema](https://server/group/jobs/raw/master/doc/systemDiagram.jpg)

私のために機能していません(BlobパスのURL)

![system schema](https://server/group/jobs/blob/master/doc/systemDiagram.jpg)

あなたのURLは有効ではないと思います:httpsの後にスラッシュが1つありません。少し遅れたかもしれません。:)
Funder

@Funderに感謝します。URLを修正しました。入力ミスでした。😉
Lingjingフランス

2

ローカル画像が表示されないもう1つの可能性は、画像参照スペースの意図しないインデントです![alt text](file)

これにより、「イメージインクルージョン」ではなく「コードブロック」になります。先頭のスペースを削除するだけです。


1

R Markdownへの画像の挿入に問題がありました。URL全体を実行すると、うまくC:/Users/Me/Desktop/Project/images/image.pngいく傾向があります。それ以外の場合は、マークダウンをイメージと同じディレクトリか、その祖先ディレクトリに配置する必要があります。画像を参照するとき、宣言された編み物ディレクトリは無視されているようです。


これは質問に対する答えを提供しません。同様の質問検索するか、ページの右側にある関連およびリンクされた質問を参照して回答を見つけることができます。関連するが異なる質問がある場合は、新しい質問をし、この質問へのリンクを含めてコンテキストを提供します。参照:質問して、回答を得て、気を散らさない
Shanteshwar Inde

0

画像をマークダウンファイルと同じフォルダーに配置するか、画像への相対パスを使用します。



0

Jupyterノートブック値下げは、使用することができます

<img src="RelPathofFolder/File" style="width:800px;height:300px;">

読みやすくするために簡単な編集(および誤植の修正)を行いました。正しいリンクである必要がありますが、念のため確認する必要があります:)
Daniel Brose

1
プロ:<img >タグを使用してHTMLのカスタマイズを追加
Sumanth Lazarus

0

ツールによっては、HTMLをマークダウンに挿入することもできます。

<img src="./img/Isolated.png">

これは、フォルダー構造が次のとおりであることを前提としています。

 ├── img
     └── Isolated.jpg
 ├── README.md

-2

Webサーバーをセットアップする必要はありません

要点のコメントセクションにローカル画像をアップロードしてみて、生成されたURLをコピーして貼り付けました。私のために働いた😊

ここに画像の説明を入力してください


-3

私は解決策を得ました:

a)インターネットの例:

![image info e.g. Alt](URL Internet to Images.jpg "Image Description")

b)ローカル画像の例:

![image Info](file:///<Path to your File><image>.jpg "Image Description")
![image Info](file:///C:/Users/<name>/Pictures/<image>.jpg "Image Description")

TurboByte

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.