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

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

  • автор:

Украсьте свой 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 в любой момент, поэтому обязательно протестируйте несколько различных настроек.

chrisryana / pasteImage.md

Save chrisryana/b2657506eeb489867f3e47343588343e to your computer and use it in GitHub Desktop.

Добавление изображений в readme

��Вставка изображений в Readme.md

В этом кратком руководстве вы узнаете, как создать отдельную ветку в своем репозитории для размещения скриншотов и демонстрационных картинок для использования в файле Readme.md master-ветки.

1. Клонируйте репозиторий

Чтобы предотвратить любую потерю работы, лучше всего клонировать репозиторий в отдельном месте для выполнения этой задачи.

2. Создайте новую ветку

Создайте новую ветку в репозитории, используя в терминале команду git checkout —orphan assets

Это создаст и переключит вас на новую ветку под названием «assets». Флаг —orphan создает новую ветку пустой, без привязки к родительской ветке. В ней не будет коммитов. Однако она сохранит рабочее дерево.

3. Удалите все файлы из дерева

git rm -rf .

Важно: обязательно убедитесь что находитесь в нужной ветке «assets» с помощью команды git branch

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

4. Добавьте свои изображения и передайте изменения

Переместите в папку проекта все необходимые файлы и введите в терминал команду git add . . Теперь можно закоммитить изменения: git commit -m «Добавлены демонстрации» .

5. Отправьте изменения в удаленный репозиторий

git push origin assets

6. Используйте изображения в Readme

Теперь вы можете использовать ссылку ![alt text](https://raw.githubusercontent.com/username/projectname/commit/img.png) в вашем readme.

  • alt text – любой текст описывающий изображение. Лучше указать, тк если указана неверная ссылка, будет легко обнаружить это.
  • username – логин на гитхаб
  • projectname – название репозитория
  • commit – уникальный hash коммита. Чтобы его узнать нужно ввести в терминал команду git log и скопировать безобразно длинную строку из букв и цифр.
  • img.png – имя файла изображения

7. Удалите ветку

Проверьте, что все изображения корректно отображаются в Readme. Если изображения нет, но и иконка поврежденного файла не отображается — все нормально. Значит файл достаточно большой и еще не загрузился. У меня такое было и занимало до 5-7 минут.

Теперь можно удалить ветку git push origin —delete assets

Все изображения должны отображаться��

Как добавить картинку на GitHub, чтобы отображалась в файле README.md ?

Author24 — интернет-сервис помощи студентам

Привет. У меня в корне проекта лежат разные папки и файлики, и валяется среди них файл README.md. Я сделал скриншот, сохранил в формате .jpg screenshot.jpg. И положил этот файлик рядом с README.md в общую кучу.

Подскажите, можно ли как-то прописать какую-нибудь команду в README.md, чтобы он скриншот в себя включил? Чтобы потом при открытии проекта на GitHub в этом самом файлике README.md была видна картинка?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать так чтобы нажимая на картинку из одной формы открывалась другая при этом эта же картинка там же отображалась
Как сделать так чтобы нажимая на картинку из одной формы открывалась другая(как открывалась знаю).

Куда нужно поместить картинку с иконкой, чтобы она отображалась на сайте
1) Куда нужно поместить картинку с иконкой, чтобы она отображалась на сайте. 2) Какое расширение.

Delphi XE7: Как добавить картинку в мобильное приложение, чтобы она как фон была в нем?
Ребят, вопрос наверное покажется абсолютно глупым, но простите, не знаю как сделать вот и задаю.

Регистрация: 31.10.2015
Сообщений: 20

Лучший ответ

Сообщение было отмечено alex_7 как решение

Решение

Надо отправить свой свой проект на Github, и уже там, редактируя README.md добавлять ссылку на скриншот, который тоже должен лежать на гитхабе. А добавляется скрин так:

![](ссылка на скрин лежащий в репозитории проекта)

Регистрация: 17.03.2016
Сообщений: 215

ЦитатаСообщение от Анфисочка Посмотреть сообщение

Надо отправить свой свой проект на Github, и уже там, редактируя README.md добавлять ссылку на скриншот, который тоже должен лежать на гитхабе.

Спасибо получилось

Эксперт .NET

10590 / 6512 / 1508
Регистрация: 25.05.2015
Сообщений: 19,725
Записей в блоге: 14

ЦитатаСообщение от Анфисочка Посмотреть сообщение

Надо отправить свой свой проект на Github, и уже там, редактируя README.md добавлять ссылку на скриншот, который тоже должен лежать на гитхабе.

Вовсе не обязательно уже там. Это можно и локально сделать, а потом запушить в репозиторий.

Добавлено через 15 минут
В квадратных скобках указывается альтернативный текст (атрибут alt у тега img в html).

Также можно разделить:

![][logo] [logo]: resources/image.png "Logo text"

Ещё изображение можно прямо html тегом добавить, если нужны дополнительные атрибуты, которых через markdown не передать:

img src="resources/image.png" width="200" height="50"/>

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

Нужно было вставить картинку в описание репозитория на ГитХабе, после ряда мучений сформировался рабочий вариант.

![Image alt](https://github.com///raw///image.png)

— ваш ник на ГитХабе;
— репозиторий где хранятся картинки;
— ветка репозитория;
— путь к месту нахождения картинки.

![Иллюстрация к проекту](https://github.com/jon/coolproject/raw/master/image/image.png)

P.S. Если ветка отличается от «master», то вписываем её. Например, для генерируемого ГитХабом из репозитория сайта — это «gh-pages».

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

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