Недавно я присоединился к 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-pages делает URL-адреса хрупкими. Другой человек, работающий над проектом, поддерживающим gh-страницу, может не знать, что что-то внешнее зависит от пути к этим изображениям. Ветвь gh-pages имеет особое поведение на GitHub, которое не обязательно для размещения образов CDN.
• Отслеживание активов в управлении версиями - это хорошо. По мере роста и изменения проекта это более устойчивый способ управления и отслеживания изменений несколькими пользователями.
• Если изображение применяется к определенной версии программного обеспечения, может быть предпочтительным связать неизменное изображение. Таким образом, если изображение позднее обновляется для отражения изменений в программном обеспечении, любой, кто читает файл readme этой редакции, найдет правильное изображение.

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

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-to-image: каким бы ни был ваш ресурс изображения. URI изображения

Пример:

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

Это будет выглядеть следующим образом:

Используйте таблицы, чтобы выделиться, это придаст ему особый шарм

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

Разделите каждую ячейку столбца символом |

и заголовок таблицы (первая строка) на 2-й строке ---

| Кол 1 | Кол 2 |
| ------------ | ------------- |
| изображение 1 | изображение 2 |

вывод

Теперь просто поместите <img src="url/relativePath">на изображение 1 и изображение 2, если вы используете два изображения

Примечание: если вы используете несколько изображений, просто включите больше столбцов, вы можете использовать атрибуты width и height, чтобы он выглядел читабельным.

пример

| Кол 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">|

Интервал не имеет значения

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

помогло: адам-р

Вы можете просто сделать:

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файле, так и в моей документации по проекту PySti reStructredText ( здесь )

Я решил эту проблему. Вам нужно только сослаться на чужой файл readme.

Сначала вы должны загрузить файл изображения в библиотеку кода GitHub! Затем прямая ссылка на адрес файла изображения.

Я обычно размещаю изображение на сайте, это может быть ссылка на любое размещенное изображение. Просто добавьте это в readme. Работает с .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. Скопируйте и вставьте любые изображения в папку с документами. Затем добавьте их с помощью git addкоманды.

4. Передайте и нажмите.

5. Изображения являются общедоступными по следующему адресу:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ филиал ^ / ^ расположение_объектов в репозитории ^

Где: * ^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-файл в корень и связывался с именем файла без указания пути:

![Screenshot](screenshot.png)

Я просто расширяю или добавляю пример к уже принятому ответу.

Как только вы поместите изображение в репозиторий Github.

Затем:

• Откройте соответствующее Github репо в вашем браузере.
• Перейдите к целевому файлу изображения. Затем просто откройте изображение на новой вкладке.
• Скопируйте 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находится в корневом каталоге.

Есть 2 простых способа сделать это,

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

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

САМЫЙ ПОСЛЕДНИЙ

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

Теперь вы можете использовать:

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

-ИЛИ-

Следуй этим шагам:

1. На GitHub перейдите на главную страницу репозитория.

2. Под своим именем хранилища нажмите Wiki.

3. Используя боковую панель вики, перейдите на страницу, которую хотите изменить, и нажмите «Изменить».

4. На вики-панели инструментов нажмите Изображение .

5. В диалоговом окне «Вставить изображение» введите URL-адрес изображения и альтернативный текст (который используется поисковыми системами и программами чтения с экрана).
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
• перетаскивать изображения на тело divвопроса

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

Добавьте изображение в свой репозиторий из опции загрузки файла, затем в файл README

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

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

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

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