Чи можливо розмістити скріншот у файлі README у сховищі GitHub? Що таке синтаксис?

Якщо ви використовуєте 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

Якщо ви використовуєте SVGs , то вам необхідно встановити атрибут дезінфікувати до trueа: ?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")

Хоча вже є прийнята відповідь, я хотів би додати інший спосіб завантаження зображень у readme на GitHub.

• Вам потрібно створити випуск у вашому РЕПО
• Перетягніть зображення в області коментарів
• Після створення посилання на зображення вставте його у свою програму readme

Більш детальну інформацію ви можете знайти тут

Я виявив, що шляху до зображення в моєму репо не вистачає, мені довелося посилання на зображення на raw.github.comсубдомені.

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

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

1. Завантажте своє зображення на postimage.org
2. Отримайте URL-адресу github Markdown
3. Вставте у свій ReadMe

Один рядок нижче повинен бути тим, що ви шукаєте

якщо ваш файл знаходиться в сховищі

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

якщо ваш файл знаходиться в іншій зовнішній URL-адресі

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

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

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

АЛЕ: Як надати url?

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

Отже ... ви можете використовувати цей дивовижний трюк, щоб зробити github хостом вашого файлу зображень. TDLR:

1. створити випуск у списку питань вашого репо
2. перетягніть скріншот із цього питання
3. скопіюйте код розмітки, який нещодавно створив github для відображення вашого зображення
4. вставте його на ваш readme (або куди хочете)

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

Набагато простіше, ніж додавати URL. Просто завантажте зображення в той же сховище, як:

![Screenshot](screenshot.png)

додайте це до README

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

Відмітка: ![Screenshot](http://url/to/img.png)

• Створіть питання щодо додавання зображень
• Додайте зображення за допомогою перетягування або вибору файлів

• Потім скопіюйте джерело зображення

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

Готово!

Крім того, ви можете використовувати якийсь веб-сайт хостингу зображень, наприклад, imgurотримати його URL та додати його у файл README.md, або ви також можете використовувати хостинг статичних файлів.

Зразок випуску

Спосіб 1-> Спосіб розмітки

![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 " />

Примітка -> Якщо ви не хочете стилізувати зображення, тобто змінити розмір, видаліть частину стилю

По-перше, створіть у корені локального репортажу каталог (папку), який буде містити screenshotsдодане ви хочете. Назвемо ім’я цього каталогу screenshots. Розмістіть зображення (JPEG, PNG, GIF, `тощо), які ви хочете додати до цього каталогу.

Скріншот робочої області Android Studio

По-друге, вам потрібно додати посилання на кожне зображення до вашої 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 автоматично організовує їх для вас.

Нарешті, введіть свої зміни та натисніть!

Я гуглив кілька подібних питань і не побачив відповіді на свою проблему та її досить просте / легке рішення.

Google Cloud Storage - дещо інший підхід до зображень у програмах README

Ось так: як і OP, я хотів зображення в моєму Github README і, знаючи синтаксис Markdown для цього, набрав його:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

Для цього потрібно виконати фактичні заміни (наприклад, MY_IMAGE = image.jpg), щоб це працювало.

Але зачекайте ... невдача - фактично не винесена фотографія! І посилання точно така, як дана в Google Storage!

Github camo- анонімні зображення

Github розміщує ваші зображення анонімно , так! Однак це є проблемою для ресурсів пам’яті Google. Потрібно отримати згенерований URL-адресу з консолі Google Cloud.

Я впевнений, що є більш гладкий спосіб, проте просто відвідайте задану кінцеву точку URL-адреси та скопіюйте довгу URL-адресу. Деталі:

Інструкції

1. Відвідайте консоль пам’яті: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
2. Клацніть на зображенні, яке ви хочете відобразити в Github (тут відображається сторінка "Інформація про об'єкт")
3. Скопіюйте цю пасту (URL, що починається з httpsне gs) на нову вкладку / вікно браузера
4. Скопіюйте макарони новою згенерованою URL-адресою - вона повинна бути довшою - із нової вкладки / вікна веб-переглядача у ваш файл Github README

Сподіваємось, це допомагає пришвидшити та прояснити цю проблему для інших.

Для мене найкращий спосіб -

1. Створіть нову проблему з цим сховищем на github, а потім завантажте файл у форматі gif. Для перетворення відеофайлів у формат gif ви можете використовувати цей веб-сайт http://www.online-convert.com/
2. Надішліть щойно створений випуск.
3. Скопіюйте адресу завантаженого файлу
4. Нарешті, у вашому файлі README поставлено! [Demo] (КОПІРОВАНА АДРЕСА)

Сподіваюсь, це допоможе.

Додайте зображення у сховище з параметра файлу завантаження, а потім у файл README

![Alt text]("enter image url of repositoryhere") 

З зображеннями, розташованими в /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>