Как добавить скриншот в README в репозитории github?

Можно ли поместить скриншот в файл README в репозиторий GitHub? Какой синтаксис?

Ответы

Ответ 1

Если вы используете Markdown (README.md):

При условии, что у вас есть изображение в вашем репо, вы можете использовать относительный URL:

![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title")

Если вам нужно встроить изображение, размещенное в другом месте, вы можете использовать полный URL

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub рекомендует использовать относительные ссылки с параметром ?raw=true чтобы обеспечить правильное указание разветвленных репо.

Параметр raw=true используется для того, чтобы изображение, на которое вы ссылаетесь, отображалось как есть. Это означает, что будет связано только изображение, а не весь интерфейс GitHub для этого соответствующего файла. Смотрите этот комментарий для более подробной информации.

Посмотрите пример: https://raw.github.com/altercation/solarized/master/README.md

Если вы используете SVG, вам также необходимо установить для атрибута sanitize значение true :? Raw ?raw=true&sanitize=true. (Спасибо @EliSherer)

Также документация по относительным ссылкам в файлах README: https://help.github.com/articles/relative-links-in-readmes

И, конечно же, документы по уценке: http://daringfireball.net/projects/markdown/syntax

Кроме того, если вы создаете новые screenshots веток для хранения изображений, вы можете избежать их нахождения в master рабочем дереве.

Затем вы можете вставить их, используя:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

Ответ 2

Даже если есть уже принятый ответ, я хотел бы добавить еще один способ загрузки изображений в readme на GitHub.

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

Более подробную информацию вы можете найти здесь

Ответ 3

Я обнаружил, что пути к изображению в моем репо недостаточно, я должен был ссылаться на изображение в субдомене raw.github.com.

Формат URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Пример разметки ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

Ответ 4

Одна строка ниже должна быть тем, что вы ищете

если ваш файл находится в репозитории

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

если ваш файл находится в другом внешнем URL

![ScreenShot](https://{url})

Ответ 5

  • Загрузите свое изображение в postimage.org
  • Получить github Markdown url
  • Вставьте в свой ReadMe

Ответ 6

Синтаксис разметки для отображения изображений действительно:

![image](https://{url})

НО: Как предоставить url?

  • Вы, вероятно, не хотите загромождать свое репо с помощью скриншотов, они не имеют никакого отношения к коду
  • вам, возможно, не стоит беспокоиться о том, чтобы сделать ваше изображение доступным в Интернете... (загрузите его на сервер...).

Итак... вы можете использовать этот удивительный трюк, чтобы github размещал ваш файл изображения. TDLR:

  • создать проблему в списке проблем вашего репо
  • перетащите снимок экрана по этой проблеме.
  • скопируйте код уценки, который только что создал для вас github, чтобы отобразить ваше изображение.
  • вставьте его в свой файл readme (или где хотите)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

Ответ 7

добавить это в README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>

Ответ 8

Метод 1- > Метод Markdown

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Метод 2- > HTML-способ

<img src="https://link(format same as above)" width="100" height="100"/>

или

<img src="https://link" style=" width:100px ; height:100px " />

Примечание- > Если вы не хотите стилизовать свое изображение, измените размер стильной части

Ответ 9

Гораздо проще, чем добавить URL. Просто загрузите изображение в тот же репозиторий, например:

![Screenshot](screenshot.png)

Ответ 10

Markdown: ![Screenshot](http://url/to/img.png)

  • Создайте проблему с добавлением изображений
  • Добавить изображение путем перетаскивания или выбора файла

  • Затем скопируйте источник изображения

  • Теперь добавьте ![Screenshot](http://url/to/img.png) в ваш файл README.md

Готово!

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

Пример проблемы

Ответ 11

Сначала создайте каталог (папку) в корне локального репо, который будет содержать screenshots вы хотите добавить. Позволяет назвать имя этого каталога screenshots. Поместите изображения (JPEG, PNG, GIF и т.д.), Которые вы хотите добавить в этот каталог.

Скриншот рабочего стола Android Studio Workspace

Во-вторых, вам нужно добавить ссылку на каждое изображение в ваш README. Итак, если у меня есть изображения с именами 1_ArtistsActivity.png и 2_AlbumsActivity.png в моем каталоге скриншотов, я добавлю их ссылки следующим образом:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src="screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

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

Наконец, внесите свои изменения и нажмите их!

Ответ 12

Для меня лучший способ -

  • Создайте новую проблему с этим репозиторием в github, а затем загрузите файл в формате gif. Для преобразования видеофайлов в формат gif вы можете использовать этот веб-сайт http://www.online-convert.com/
  • Отправить вновь созданную проблему.
  • Скопировать адрес загруженного файла
  • Наконец, в вашем файле README поставлен! [demo] (COPIED ADDRESS)

Надеюсь, это поможет.

Ответ 13

С изображениями, расположенными в каталоге /screen-shots. Внешний <div> позволяет размещать изображения. Заполнение достигается с помощью <img width="desired-padding" height="0">.

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>