Как добавить изображение в Markdown

Визуальная информация воспринимается гораздо легче и эффективнее, чем простой текст. Именно поэтому говорится, что картинка стоит тысячи слов. Так что возможно, что и ты захочешь добавить изображение в свой документ или пост в блоге. Ниже несколько простых способов, как добавить изображение в markdown публикацию или документ.

Markdown - это простой и удобный язык разметки, который можно использовать для форматирования практически любых документов. Если захочешь узнать про него больше, читай официальный The Markdown Guide.

Как добавить изображение из файла

Предположим, что нужные тебе изображения находятся в папке images:

1
2
3
4
5

 ├─ images
     └─ picture.jpg
     └─ picture-2.jpg
     └─ picture-three.jpg
 ├─ README.md

Важно: Имей в виду, что если в названии файла содержатся скобки или другие специальные символы, то файл может не отобразится. Если хочешь знать, как правильно называть файлы для веб-проектов, посмотри вот эти рекомендации для имен файлов в интернет проектах.

Первый способ, как отобразить локальное изображение в markdown документе, это использовать следующий код:

1

![Текст с описанием картинки](/images/picture.jpg)

Часть в квадратных скобках - это так называемый альтернативный текст, который важен по следующим причинам:

1. Для доступности. Программы чтения с экрана читают именно его. Например, для тех, кто плохо видит.

2. Этот текст будет отображаться вместо изображения, если файл изображения не может быть загружен.

3. Он обеспечивает контекст и описание изображения для поисковых систем, помогая им с поиском.

Часть в круглых скобках - это путь к файлу. Обрати внимание, что перед images стоит /. Без этого символа твой документ может отображаться нормально на твоем компьютере, но после загрузки на сервер в интернете она отображаться перестанет. Это одна из основных причин, почему так случается.

Другой способ, как отобразить локальное изображение в markdown публикации, это использовать тег image в тексте документа:

1

<image src="/images/picture.jpg" alt="Текст с описанием картинки">

Одним из преимуществ этого способа заключается в том, что так можно использовать дополнительные возможности для контроля изображения. Специфика зависит от ресурса, на котором ты публикуешь документ.

Любой из этих способов даст нужный результат, так что выбор за тобой.

Как добавить изображение из ссылки

Когда необходимо вставить в документ изображение, которое находится где-то в интернете, то просто используй ссылку на изображение:

1

![Текст с описанием картинки](https://picsum.photos/800/600)

или

1

<image src="https://picsum.photos/800/600" alt="Описание картинки">

Как добавить подпись к изображению

В markdown коде для этого просто добавь через пробел текст в кавычках:

1

![Описание картинки](/images/picture.jpg "Подпись под картинкой")

В HTML коде для этой цели необходимо использовать аттрибут caption:

1
2
3
4

<image
  src="/images/picture.jpg"
  alt="Текст с описанием картинки"
  caption="Подпись под картинкой">

Как добавить рамку для изображения

Иногда необходимо добавить рамку вокруг изображения. Например, если у картинки и страницы одинаковый фон, и картинку нужно визуально отделить.

Изображение в markdown формате не имеет возможности добавить стили оформления, поэтому здесь это невозможно. Ты можешь добавить специальную команду в тег img, как в коде ниже:

1

<img src="/images/picture.jpg" border="5px solid red"/>

Но увы, и это не сработает. Рамка отображаться не будет.

Тем не менее решение есть и довольно необычное. Найдено на StackOverflow. Все, что нужно сделать, это окружить тег image другим тегом - kbd:

1
2
3

<kbd>
  <img src="/images/picture.jpg" />
</kbd>

Чётко! 😎