Нещодавно я приєднався до GitHub . Я приймав там кілька проектів.

Мені потрібно включити декілька зображень у мій файл README. Я не знаю, як це зробити.

Я шукав з цього приводу, але все, що я отримав, - це деякі посилання, які підказують мені "розміщувати зображення в Інтернеті та вказувати шлях зображення у файл README.md".

Чи можливо це зробити без розміщення зображень на будь-яких сторонніх веб-хостингах?

Спробуйте цю відмітку:

![alt text](http://url/to/img.png)

Я думаю, ви можете зв’язати безпосередньо з необробленою версією зображення, якщо він зберігається у вашому сховищі. тобто

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

Ви також можете використовувати відносні шляхи, як-от

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

• Ви можете створити новий випуск
• завантажуйте на нього зображення (перетягування та опускання)
• Скопіюйте URL-адресу зображень та вставте її у файл README.md.

ось детальне відео YouTube пояснило це докладно:

https://www.youtube.com/watch?v=nvPOUdz5PL4

Це набагато простіше цього.

Просто завантажте своє зображення в корінь сховища та посилання на ім'я файлу без жодного шляху, як-от так:

![Screenshot](screenshot.png)

Ви також можете додавати зображення простими тегами HTML :

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

Багато розміщених рішень є неповними або не на мій смак.

• Зовнішній CDN, подібний imgur, додає ще один інструмент до ланцюга. Мех.
• Створення фіктивного питання в трекері випусків - це злом. Це створює безлад та заплутує користувачів. Болісно перенести це рішення на вила або від GitHub.
• Використання гілки gh-сторінок робить URL-адресами крихкими. Інша людина, яка працює над проектом, що підтримує gh-сторінку, може не знати чогось зовнішнього, залежить від шляху до цих зображень. Відділення gh-сторінок має особливу поведінку на GitHub, що не потрібно для розміщення зображень CDN.
• Відстеження активів у контролі версій - хороша річ. У міру того, як проект зростає та змінюється, це більш стійкий спосіб управління та відстеження змін кількома користувачами.
• Якщо зображення стосується конкретної редакції програмного забезпечення, може бути кращим пов'язати незмінне зображення. Таким чином, якщо зображення пізніше буде оновлено, щоб відобразити зміни в програмному забезпеченні, кожен, хто читає режим редакції, знайде правильне зображення.

Моє бажане рішення, натхнене цим принципом , - використовувати галузь активів із посиланнями на конкретні зміни .

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

Побудуйте "постійну посилання" на цю редакцію зображення та загорніть її в Markdown.

Однак вручну шукати команду SHA вручну незручно, тому, як ярлик клацніть Y, щоб постійна посилання на файл у певному комітеті, як йдеться на цій сторінці help.github.

Щоб завжди відображати останнє зображення у відділенні активів, використовуйте URL-адресу крапки:

https://github.com/github/{repository}/blob/assets/cat.png 

(З тієї ж довідкової сторінки GitHub Перегляди файлів показують останню версію гілки )

Зафіксуйте своє зображення ( image.png ) у папці ( myFolder ) та додайте наступний рядок у вашому README.md :

![Optional Text](../master/myFolder/image.png)

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

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

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

Готово!

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

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

Мені потрібно включити декілька зображень у мій файл README. Я не знаю, як це зробити.

Я створив невеликий майстер, який дозволяє створювати та налаштовувати прості галереї зображень для readme вашого сховища GitHub: Див. ReadmeGalleryCreatorForGitHub .

Майстер користується тим, що GitHub дозволяє тегам img виникати в README.md. Також майстер використовує популярний трюк завантаження зображень на GitHub, перетягуючи їх у зону випуску (як уже згадувалося в одній з відповідей у ​​цій темі).

Просто додайте <img>тег у свій README.md із відносним src у вашому сховищі. Якщо ви не використовуєте відносний src, переконайтеся, що сервер підтримує CORS.

Це працює тому, що GitHub підтримує inline-html

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

Поспостерігайте тут

Основний синтаксис

![myimage-alt-tag](url-to-image)

Тут:

1. my-image-alt-tag: текст, який буде відображатися, якщо зображення не відображається.
2. URL-адреса до зображення: незалежно від ресурсу зображення. URI зображення

Приклад:

![stack Overflow](http://lmsotfy.com/so.png)

Це виглядатиме так:

Використовуйте таблиці для виділення, це додасть йому окремої принади

Синтаксис таблиці:

Відокремте кожну комірку стовпця за символом |

та заголовок таблиці (перший рядок) за другим рядком ---

| коло 1 | коло 2 |
| ------------ | ------------- |
| зображення 1 | зображення 2 |

вихід

Тепер просто поставте <img src="url/relativePath">зображення 1 і зображення 2, якщо ви використовуєте два зображення

Примітка: якщо ви використовуєте кілька зображень, просто містять більше стовпців, ви можете використовувати атрибут ширини та висоти, щоб вони виглядали читабельними.

Приклад

| коло 1 | коло 2 |
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

Розміщення значення не має

Вихідне зображення

допомогли: adam-p

Ви можете просто зробити:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Тоді ви можете просто посилатися на нього у READMEфайлі так:

![diagram](diagram.png)

У моєму випадку я використовую imgur і використовую пряме посилання таким чином.

![img](http://i.imgur.com/yourfilename.png)

Ви можете посилання на зображення у вашому проекті з README.md (або зовні), використовуючи альтернативне посилання github CDN.

URL буде виглядати приблизно так:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

У мене в проекті є зображення SVG, і коли я посилаюсь на нього у своїй проектній документації Python, він не відображається.

Посилання на проект

Ось посилання проекту на файл (не відображається як зображення):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Приклад вбудованого зображення:

Сире посилання

Ось посилання RAW на файл (усе ще не відображається як зображення):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Приклад вбудованого зображення:

CDN-посилання

Використовуючи посилання CDN, я можу зв’язати файл із використанням (відображається як зображення):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Приклад вбудованого зображення:

Ось так я можу використовувати зображення з мого проекту як в моєму README.mdфайлі, так і в моєму проекті PyPi дублювання reStructredText ( тут )

Я вирішив цю проблему. Вам потрібно лише посилатися на чужий файл readme.

Спочатку слід завантажити файл зображення в бібліотеку кодів github! Потім пряме посилання на адресу файлу зображень.

Я зазвичай розміщую зображення на сайті, це може посилатися на будь-яке розміщене зображення. Просто киньте це в ридмі. Працює для .rstфайлів, не впевнений.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

У моєму випадку я хотів показати екран друку на, Githubале і на NPM. Хоча використання відносного шляху працювало всередині Github, воно не працювало поза ним. В основному, навіть якщо я також підштовхнув свій проект NPM(який просто використовує те самеreadme.md , зображення ніколи не відображалося).

Я спробував декілька способів, врешті-решт, це працювало для мене:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Тепер я правильно бачу своє зображення в NPMбудь-якому іншому місці, де я можу опублікувати свій пакет.

Якщо вам потрібно завантажити кілька зображень для документації, хорошим підходом є використання git-lfs . Припускаючи, що ви встановили git-lfs, виконайте наступні дії:

1. Запропонуйте використовувати git lfs для кожного типу зображень:

   git lfs *.png
   git lfs *.svg
   git lfs *.gif
   git lfs *.jpg
   git lfs *.jpeg
   

2. Створіть папку, яка буде використовуватися як розташування зображення, наприклад. doc. У системах на базі GNU / Linux та Unix це можна зробити за допомогою:

   cd project_folder
   mkdir doc
   git add doc
   

3. Скопіюйте будь-які зображення в папку doc. Потім додайте їх черезgit add команди.

4. Здійснити та натиснути.

5. Зображення є загальнодоступними у наступній URL-адресі:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ гілка ^ / ^ image_location у репо ^

Де: * ^github_username^ім’я користувача в github (ви можете знайти його на сторінці профілю) * ^repo_name^- ім’я сховища *^branch^ - гілка сховища, куди завантажується зображення * ^image_location in the repo^- це місце, включаючи папку, в якій зберігається зображення.

Також ви можете спочатку завантажити зображення, а потім відвідати розташування на сторінці github ваших проектів і переходити по ньому, поки не знайдете зображення, а потім натисніть кнопку download кнопку, а потім скопіюйте і вставте URL-адресу з адресного рядка браузера.

Подивіться це на мій проект як на довідку.

Тоді ви можете використовувати URL для включення їх за допомогою синтаксису розмітки, згаданого вище:

![some alternate text that describes the image](^github generated url from git lfs^)

Напр., Припустимо, ми використовуємо цю фотографію. Тоді ви можете використовувати синтаксис розмітки:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

ПРОСТО ЦІ РОБОТИ !!

подбайте про те, що використовується у великому регістрі імені вашого файлу, і додайте файл PNG до inroot та посилайтеся на ім'я файлу без жодного шляху:

![Screenshot](screenshot.png)

Я просто продовжую чи додаю приклад до вже прийнятої відповіді.

Після того, як ви розмістили зображення на репортажі Github.

Тоді:

• Відкрийте відповідне репо Github у своєму браузері.
• Перейдіть до цільового файлу зображення. Потім просто відкрийте зображення на новій вкладці.
• Скопіюйте URL-адресу
• І нарешті вставити URL до наступного шаблону ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

У моєму випадку це так

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Де

• shadmazumder моя username
• Xcode є projectname
• master є branch
• InOnePicture.pngє image, у моєму випадку InOnePicture.pngзнаходиться в кореневому каталозі.

Є два простих способи зробити це,

1) використовувати тег HTML img,

2)! [] (Шлях, де зберігається ваше зображення / image-name.png)

шлях, який ви зможете скопіювати з URL-адреси у браузері, поки ви відкриєте це зображення. може виникнути проблема з інтервалом, тому переконайтеся, що є пробіли в двох словах шляху або в назві зображення add->% 20. як і браузер.

Обидва вони працюватимуть, якщо ви хочете зрозуміти більше, ви можете перевірити мій github -> https://github.com/adityarawat29

Цю відповідь можна також знайти за посиланням: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Відображення зображень із репо-за допомогою:

доменний домен: https://raw.githubusercontent.com/

додати прапор: ?sanitize=true&raw=true

використовувати <img />тег

• Домен :raw.githubusercontent.com/
• Ім'я користувача :YourUserAccount/
• Репо :YourProject/
• Відділення :YourBranch/
• Шлях :DirectoryPath/
• Ім'я файлу :example.png

Працює для SVG, PNG та JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Код робочого прикладу, який відображається нижче після використання:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com :

Дякуємо: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -в-розмітка / readme.md

Я знайшов інше рішення, але зовсім інше, і я поясню це

В основному я використовував тег, щоб показати зображення, але я хотів перейти на іншу сторінку, коли зображення було натиснене, і ось, як я це зробив.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Якщо ви помістите його прямо поруч, розділене новим рядком, я думаю, коли ви клацнете зображення, воно переходить до тегу, який містить href на інший сайт, який ви хочете перенаправити.

ОСТАННІЙ

Вікі можуть відображати зображення PNG, JPEG або GIF

Тепер ви можете використовувати:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-OR-

Виконайте такі дії:

1. На GitHub перейдіть на головну сторінку сховища.

2. Під назвою вашого сховища натисніть Wiki.

3. За допомогою бічної панелі вікі перейдіть на сторінку, яку ви хочете змінити, а потім натисніть Редагувати.

4. На панелі інструментів вікі натисніть Зображення .

5. У діалоговому вікні «Вставити зображення» введіть URL-адресу зображення та текст alt (який використовується пошуковими системами та зчитувачами екранів).
6. Натисніть кнопку ОК.

Зверніться до Документів .

Поміркуйте, tableякщо ви додаєте кілька знімків екрана, і хочете вирівняти їх за допомогою табличних даних для поліпшення доступності, як показано тут:

Якщо ваш аналізатор розмітки підтримує його, ви також можете додати role="presentation"атрибут WIA-ARIA до елемента TABLE та пропустити thтеги.

Покроковий процес, спочатку створіть папку (назвіть свою папку) та додайте зображення / зображення, які ви хочете завантажити у файл Readme.md. (Ви також можете додати зображення / зображення в будь-яку існуючу папку вашого проекту.) Тепер натисніть значок редагування файла Readme.md, потім

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

Після додавання зображення на вкладці "Попередній перегляд змін" ви побачите попередній перегляд змін. Ви знайдете своє зображення тут. наприклад, як це, У моєму випадку,

![](app/src/main/res/drawable/refrence_image.png)

папка додатка -> папка src -> головна папка -> папка res -> перетягувана папка -> і всередині файлу, що виводиться, файл refrence_image.png знаходиться. Для додавання декількох зображень ви можете це зробити так,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Примітка 1. Переконайтеся, що у вашому імені файлу зображень немає пробілів. Якщо він містить пробіли, вам потрібно додати% 20 для кожного проміжку між іменем файлу. Краще видалити пробіли.

Примітка 2. Ви навіть можете змінити розмір зображення за допомогою тегів HTML або іншими способами. ви можете отримати його в Google, щоб отримати більше. якщо вам це потрібно.

Після цього напишіть повідомлення про внесення змін і виконайте зміни.

Є багато інших хак, як це зробити, створити проблему і т. Д. І т.д. На сьогоднішній день це найкращий метод, який я натрапив.

Ми можемо це зробити просто,

• створити новий випуск на GitHub
• перетягуйте зображення на корпус divIssue

через кілька секунд буде створено посилання. Тепер скопіюйте URL-адресу посилання або зображення та використовуйте її будь-яку підтримувану платформу.

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

![Alt text]("enter repository image URL here") 

Є ще один варіант, якого я не бачив. Ви можете просто створити інше сховище під своїм користувачем або організацією, яке називається "Активи". Надішліть свої зображення до цього репо-файлу та посилайтеся на них з інших репост:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

Я зробив це в одному зі своїх репостів, і це мені добре підходить. Я можу редагувати свої зображення README для всіх моїх проектів незалежно від коду, але все одно зберігаю їх на одному місці . Ніяких питань, філій чи інших легкозаміщених артефактів не потрібно.