0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ファイル名にスペースがある画像をMarkdownで正しく挿入するには

Last updated at Posted at 2022-05-01

結論

スペースが含まれるファイルを表示するには、
スペースを%20で置き換えます。
%20はスペースをURLエンコーディングしたものです。

もう少し詳しく

Markdown形式で画像を挿入するには

画像を表示するときのフォーマットその1
![代替テキスト](画像のパス "画像タイトル")

あるいは

画像を表示するときのフォーマットその2
![代替テキスト](画像のパス)

という書き方をします。

試しにgithubのレポジトリに「test_image2.png」という画像をpushし、README.mdに以下のように書いてみます。

画像表示
![image](test_image2.png)

すると以下のように表示されます。

「test_image2.png」が表示される
2022-05-01 20_43_38-Window.png


次に「test image.png」という画像をpushし、README.mdに以下のように書いてみます。
画像表示(ファイル名にスペースあり)
![image](test image.png)

すると、画像も代替テキストも表示されません。

「test image.png」は表示されず、Markdownがそのまま表示される
2022-05-01 20_47_39-Window.png

これはスペースが入ったことでパス情報が区切られ、かつ、スペース後の文字列に""がないので、
画像タイトルとも扱われなかったためこのような表示になってしまったのだと思われます。

画像を表示するときのフォーマット(再掲)
![代替テキスト](画像のパス "画像タイトル")

スペースが含まれるファイルを表示するには、
スペースをURLエンコーディングした%20で置き換えます。

画像のファイル名にスペースがあるときの正しい書き方
![image](test%20image.png)

このようにすると正しく画像が表示されます。

名前にスペースを含むファイル「test image.png」が正しく表示される
2022-05-01 20_47_14-Window.png
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?