🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Q&A

解決済

1回答

8013閲覧

VS Code Markdown で画像がPreviewに表示されません。

Kup

総合スコア11

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

0グッド

0クリップ

投稿2022/06/30 10:00

VS Code Markdown で画像がPreviewに表示されません。
ここは初めてなので使い方がうまくないと思いますが、ご容赦ください(ご指摘は歓迎します)

イメージ説明
ワークスペースに記述したマークダウンに画像を表示しようとするとローカルフォルダへの画像の表示ができません。

![BorderLine種類](img/BorderLine.png) ![qwerty](file:///C:/tmp/BorderLine.png) ![Test](./img/BorderLine.png) ![Test1](../../c#/img/BorderLine.png) ![picture 2](https://images.tetsudo.com/report/305/65_001.jpg)

インターネットのURLに対しては表示されていますが、このマークダウンファイルを起点とした表示などではうまくいきません。
ワークスペースを起点とかするという話もあったので、念のため プログラムヒント.code-workspace のあるフォルダからのパスも書きましたが(Test1)ワークスペースの起点の位置がこのファイルの位置かもわからない程度なのかもしれませんがダメでした。

拡張機能は、使ってもいない Jupytter や、Kite, Markdown All in One, Path Intellisense, PrintCode,Python, Remote WSL, vscode.pdf などなどいろいろ入れています。

Markdown Imageは、いったん入れて外して Paste Imageを入れましたが、どうやら入れる前と後で変わりはないようです。

なお、OSは Windows11 Proです。

どうか、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kup

2022/07/02 22:38

回答がつかないのもおかしいと思い自分でも考えて、OneDrive上なのがいけないのと思い c:\tmp 上に画像とマークダウンファイルを置いたところ ![相対]{BorderLine.png) はうまく行き ![絶対](file:///c:/tmp/BorderLine.png) はうまく行きませんでした。 そこで、OneDrive上のファイルの指定方法、と 絶対参照での指定方法でのアドバイスをお願いします。
Kup

2022/07/05 09:27

ローカルフォルダでクラウドと同期していないフォルダではどうなるか試した結果は以下の通り ![Line](BorderLine.png) //OK ![Tiger](file:///c:/tmp/PC040850.JPG) //NG ![Tiger](C:/tmp/PC040850.JPG) // Win11ではOK。Win10ではNG ![Test2](C:\tmp\PC040850.JPG) //NG 自分のWin11とWin10のPCで結果が違うのはエクスプローラーで写真を選んでパスをコピーした C:\tmp\PC040850.JPG の \ を / に替えたものです。 エクスプローラでクリックするとOneDrive上も写真は正常に表示されます。
guest

回答1

0

自己解決

その後、ちょっと様子が変わったのでご連絡します。
今現在(2022/0719)、相対パスの指定はOneDrive何のフォルダでもうまく動作します。
ローカルフォルダ内からは c:/tmp/Target.jpg はうまく表示できますが file:///c:/tmp/Target.jpg などは表示できません。

パス表示方法ローカルフォルダ内からOnDriveフォルダ内から
相対パスTarget.jpgOO
相対パス./Target.jpgOO
絶対パスc:/tmp/Taget.jpgO/XX
絶対パスc:\tmp\Taget.jpgXX
URLC:///tmp¥Target.jpgXX

このパスの指定は html表記でもMarkdown Preview Enhancedでの @importを使う方法でも同じようです。
ただし、同じVS Codeでもマシンが違えば結果が異なるのがありました。
当初、OneDriveでも相対表示が使えませんでしたが、なぜかそれが解消されていて、自分としては相対パスが使えれば、(相対パス以外はセキュリティ上の問題に関係しているようですね?)取り合えず満足ということで、この問題は一応終了ということにさせていただきます。
ご覧いただいた皆様ありがとうございました。

投稿2022/07/19 08:26

Kup

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問