Как добавить картинку в readme github
Перейти к содержимому

Как добавить картинку в readme github

  • автор:

Подписаться на ленту

введите сюда описание изображения

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как вставить картинку в README.md на github?

Заметил, что картинки в readme хранятся в облаке github (cloud.githubusercontent.com). Как они туда заливаются не понял. Обычное перетаскивание картинки на документ не заливает. На комментарии — да, на файл readme — нет. Делать ход конём? Заливать в коммент, а ссылку использовать в документе?

  • Вопрос задан более трёх лет назад
  • 23728 просмотров

Комментировать
Решения вопроса 1

rmakarov

Ответ написан более трёх лет назад
Нравится 8 8 комментариев
eRKa @kttotto Автор вопроса

Это понятно. На гитхабе есть возможность вставлять картинку в комментарии обычным перетаскиванием с рабочего стола на поле текстбока. Она при этом заливается на собственное облако контента гитхаба. Но такая фишка не проходит с файлом .md. Вот я и пытался разобраться, как без сторонних облаков для фоток, вставить картинку в файл. Сейчас я делаю так: открываю страницу где можно коммент оставить, перетаскиваю туда картинку, получаю ссылку, эту ссылку копирую, перехожу на страницу файла readme, вставляю ссылку в файл. Но может я чего то не знаю и это можно сделать проще?

eRKa: во второй строке человек вам привел пример как сделать ссылку на файл(изображение) в вашем репозитории.

eRKa @kttotto Автор вопроса

FoxInSox: Да, это я тоже понял, видел пример в инете. Но у меня нет картинок в репозитории. Я просто хочу в ридми запихнуть картинку с UML схемой и при этом не использовать всякие радикал и т.д., чтоб картинка была в облаке гитхаба. Вот я и интересовался, как в это облако можно залить картинку, кроме как способом, о котором я писал. Просто, зайдя сюда cloud.githubusercontent.com, не зальешь)

eRKa: не очень понятно что вы хотите сказать, но изображение может быть всего в двух местах: в вашем репозитории или где-либо еще в интернете. Роман вам показал оба варианта.

eRKa @kttotto Автор вопроса

Да, где-то еще в интернете, в частности вот здесь меня интересует cloud.githubusercontent.com. Гитхаб предоставляет возможность заливать картинки к себе в облако, для размещения в комментариях. Это делается обычным перетаскиванием картинки на текстбокс, где пишется комментарий, это очень быстро и удобно. Но эта фишка не работает, когда перетаскиваешь картинку на файл. Вот я и ищу способы показать картинку в ФАЙЛЕ из ИХ облака.

rmakarov

eRKa: я вас понял, но зачем именно ИХ облако? 2016 год, бесплатных облачных сервисов множество. Вы делаете себе лишнюю работу из ничего.

eRKa @kttotto Автор вопроса

Если это можно делать обычным перетаскиванием, зачем лезть куда то еще. Получается, что в комментариях можно использовать легко свои картинки, а в файле так не сделаешь. Не знаю, логично это или нет, недоработка их или так и задуманно)

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

Несколько простых способов добавить изображение в документ

Денис Расулев · Dec 30, 2022 ·
Случайная фотка с сайта Picsum.photos

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

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

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

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

1 2 3 4 5 
 ├─ images  └─ picture.jpg  └─ picture-2.jpg  └─ picture-three.jpg  ├─ README.md 

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

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

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

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

  1. Для доступности. Программы чтения с экрана читают именно его. Например, для тех, кто плохо видит.
  2. Этот текст будет отображаться вместо изображения, если файл изображения не может быть загружен.
  3. Он обеспечивает контекст и описание изображения для поисковых систем, помогая им с поиском.

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

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

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

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

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

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

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

![Текст с описанием картинки](https://picsum.photos/800/600) 
image src="https://picsum.photos/800/600" alt="Описание картинки"> 

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

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

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

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

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

https://picsum.photos/800/600

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

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

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

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

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

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

1 2 3 
kbd>  img src="/images/picture.jpg" /> kbd> 

Украсьте свой GitHub!

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

Как сделать свой собственный

Создание профиля GitHub README — это суперпростая задача, но ее немного трудно выполнить самостоятельно. Как только вы вошли в GitHub, инициализируйте новый репозиторий, перейдя по адресу . Назовите ваш новый репозиторий именем вашей учетной записи GitHub (подсказка: его можно найти, наведя курсор на значок вашего профиля в правом верхнем углу экрана) и нажмите «Создать репозиторий».

Для краткости отметьте пункт «Добавить файл README» при создании репозитория. README должен быть там, чтобы ваш новый необычный профиль был необычным.

Выделите его

Теперь, когда вы создали свой GitHub README, вам нужно знать несколько вещей о том, как сделать его красивым. В GitHub README используется язык Markdown. Вы можете использовать Markdown для добавления изображений, ссылок, рисунков, заголовков и многого другого.

Одна вещь, которая мне очень нравится на странице профиля GitHub — это заголовок. Это приятный личный штрих, который очень легко сделать с помощью таких программ, как PhotoShop, Sketch или даже Google Docs. А если вы хотите сделать что-то еще проще, посмотрите Canva Headers .

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

Добавить картинки в README на GitHub очень просто. Если у вас есть файл, сохраненный локально, вы можете просто перетащить его в свою разметку, и он будет импортирован. Если вы хотите добавить ссылку в виде фотографии, вы можете использовать тег и добавить src с путем к фотографии, которую вы хотите добавить. Помните, что — это самозакрывающийся тег, в Markdown могут быть ошибки, поэтому не забудьте закрыть этот тег!

Расскажите людям о себе

Людям интересны другие люди, расскажите свою историю. Пара строк текста о вашей философии разработчика может в значительной степени показать потенциальному работодателю или сотруднику, кто вы есть! Еще лучше — дать список того, над чем вы сейчас работаете, что вам интересно узнать, и дать ссылки на несколько ваших проектов. Поиск соавторов по вашим текущим проектам — один из лучших способов налаживания связей.

Это еще одна прекрасная возможность рассказать интересный факт о себе. Убедитесь, что ваши пункты краткие и в точку. Добавьте эмодзи, чтобы было немного интереснее.

Подчеркивание своих навыков

Настоятельно рекомендуется отображать свои навыки прямо на домашней странице GitHub. Вы упорно работали над этими навыками, покажите их! Когда потенциальные работодатели или соавторы зайдут на вашу страницу GitHub, это даст им возможность быстро понять, на каких языках вы можете работать.

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

Самый простой способ найти эти значки — использовать google images, а затем нажать на «tools», затем «color», затем «transparent». В результате вы получите большое количество изображений в формате .png, размер которых можно легко изменить в Markdown.

Некоторые другие замечательные источники для поиска логотипов или иконок — https://simpleicons.org/, а если вы ищете что-то более причудливое, загляните на https://shields.io.

Покажите свою работу

Еще один действительно хороший способ похвастаться своими навыками — это демонстрация своих репозиториев. Первый способ сделать это — закрепить свои лучшие репозитории прямо на домашней странице.

Чтобы изменить свои прикрепленные репозитории, перейдите на домашнюю страницу GitHub github.com/your-user-name и прокрутите страницу до раздела «Прикрепленные». Справа вверху от ваших текущих прикрепленных репозиториев есть текст с надписью «Настроить прикрепленные». Нажмите на него, и появится модальное окно со списком всех ваших работ. Отметьте те работы, которые вы хотите показать, вы можете разместить до шести репозиториев на своей домашней странице.

Если вы хотите поднять свой профиль новый уровень, обратите внимание на GitHub README Stats . GitHub README Stats — это инструмент, который позволяет отображать статистику на домашней странице GitHub в виде красиво отформатированных карточек. Вы можете передать множество параметров информации, таких как top_langs, что даст вам «карточку» для вашего README, отображающую ваши лучшие языки. Существует множество других аргументов, которые вы можете передать в URL статистики, и документация очень полезна.

Собираем все вместе

Теперь, когда вы стали мастером Markdown и чемпионом по созданию домашней страницы GitHub, переместите свой README в основную ветку и похвастайтесь своим новым красивым GitHub на LinkedIn! Помните, что вы всегда можете вернуться и отредактировать свой README в любой момент, поэтому обязательно протестируйте несколько различных настроек.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *