Добавить изображения в README.md на GitHub
Недавно я присоединился к GitHub. Я принимал там несколько проектов.
Мне нужно включить некоторые изображения в мой файл README. Я не знаю, как это сделать.
Я искал об этом, но все, что я получил, было несколько ссылок, которые говорят мне "размещать изображения в Интернете и указывать путь к изображению в файле README.md".
Есть ли способ сделать это без размещения изображений на сторонних веб-хостингах?
Ответы
Ответ 1
Попробуйте эту уценку:
![alt text](http://url/to/img.png)
Я думаю, вы можете напрямую ссылаться на необработанную версию изображения, если она хранится в вашем репозитории. то есть.
![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)
Изменить: только что заметил комментарий, ссылающийся на статью, в которой предлагается использовать gh-страницы. Кроме того, относительные ссылки могут быть лучше, чем абсолютные URL-адреса, опубликованные выше.
Ответ 2
Вы также можете использовать относительные пути, такие как
![Alt text](relative/path/to/img.jpg?raw=true "Title")
Ответ 3
- Вы можете создать новый выпуск
- загружать (перетаскивать) изображения на него
- Скопируйте URL-адрес изображения и вставьте его в файл README.md.
Вот подробное видео YouTube, объясняющее это подробно:
https://www.youtube.com/watch?v=nvPOUdz5PL4
Ответ 4
Это намного проще.
Просто загрузите изображение в корне репозитория и укажите ссылку на имя файла без какого-либо пути, например:
![Screenshot](screenshot.png)
Ответ 5
Вы также можете добавить изображения с простыми тегами 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>
Ответ 6
Многие из опубликованных решений являются неполными или не соответствуют моему вкусу.
- Внешний CDN, такой как imgur, добавляет еще один инструмент в цепочку. Мех.
- Создание фиктивной проблемы в трекер-проблеме - это взлом. Это создает беспорядок и смущает пользователей. Это боль, чтобы перенести это решение на вилку или с GitHub.
- Использование ветки gh-страниц делает URL-адреса хрупкими. Другой человек, работающий над проектом, поддерживающим gh-страницу, может не знать, что что-то внешнее зависит от пути к этим изображениям. В ветке gh-pages есть особое поведение в GitHub, которое не обязательно для размещения изображений CDN.
- Отслеживание активов в контроле версий - это хорошо. По мере роста проекта и изменения его более устойчивого способа управления и отслеживания изменений несколькими пользователями.
- Если изображение относится к конкретной версии программного обеспечения, может быть предпочтительнее связать неизменяемое изображение. Таким образом, если изображение будет обновлено позже, чтобы отразить изменения в программном обеспечении, любой, кто читает эту версию readme, найдет правильное изображение.
Мое предпочтительное решение, вдохновленное этот смысл, заключается в использовании ветки активов с permalinks до конкретные изменения.
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 needed below.
Построить "постоянную ссылку" на эту ревизию изображения и обернуть ее в Markdown:
![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)
например.
![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)
Чтобы всегда показывать последнее изображение в ветки активов, используйте assets
вместо шага:
![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)
Ответ 7
Зафиксируйте ваше изображение (image.png) в папке ( myFolder) и добавьте следующую строку в README. md:
![Optional Text](../master/myFolder/image.png)
Ответ 8
Готово!
В качестве альтернативы вы можете использовать сайт для размещения изображений, например imgur
, и получить его url и добавить его в свой файл README.md, или вы можете использовать некоторый статический хостинг файлов.
Пример проблемы
Ответ 9
Основной синтаксис
![myimage-alt-tag](url-to-image)
Здесь:
- my-image-alt-tag: текст, который будет отображаться, если изображение не отображается.
- url-to-image: независимо от вашего ресурса изображения. URI изображения
Пример:
![stack Overflow](http://lmsotfy.com/so.png)
Это будет выглядеть следующим образом:
Ответ 10
Просто добавьте <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
Соблюдайте здесь
Ответ 11
Мне нужно включить некоторые изображения в мой файл README. Я не знаю, как это сделать.
Я создал небольшой мастер, который позволяет создавать и настраивать простые галереи изображений для вашего файла readme для GitHub: см. ReadmeGalleryCreatorForGitHub.
Мастер использует тот факт, что GitHub позволяет тегам img появляться в README.md
. Кроме того, мастер использует популярную хитрость загрузки изображений в GitHub путем перетаскивания их в проблемную область (как уже упоминалось в одном из ответов в этой теме).
Ответ 12
В моем случае я использую imgur и использую прямую ссылку таким образом.
![img](http://i.imgur.com/yourfilename.png)
Ответ 13
Я решил эту проблему. Вам нужно только обратиться к другому файлу readme.
Сначала вы должны загрузить файл изображения в библиотеку кодов github! Затем прямая ссылка на адрес файла изображения.
Ответ 14
Вы можете ссылаться на изображения в вашем проекте из 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
, так и в моем проекте reStructredText в PyPi (здесь)
Ответ 15
Используйте таблицы, чтобы выделиться, это придаст ему особый шарм
Синтаксис таблицы:
Разделяйте каждую ячейку столбца символом |
и заголовок таблицы (первая строка) на 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">
|
Интервал не имеет значения
Выходное изображение
помогло: adam-p
Ответ 16
Обычно я размещаю изображение на сайте, это может быть ссылка на любой размещенный образ. Просто бросьте это в readme. Работает для файлов .rst
, не уверен в .md
.. image:: https://url/path/to/image
:height: 100px
:width: 200 px
:scale: 50 %
Ответ 17
Вы можете просто сделать:
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)
Ответ 18
В моем случае я хотел показать экран печати на Github
, а также на NPM
. Хотя использование относительного пути работало в пределах Github
, оно не работало за его пределами. В принципе, даже если я подтолкнул свой проект к NPM
(который просто использует тот же readme.md
, изображение никогда не показывалось.
Я пробовал несколько способов, в конце концов это то, что сработало для меня:
![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)
Теперь я правильно вижу свое изображение на NPM
или где-либо еще, чтобы опубликовать свой пакет.
Ответ 19
В случае, если вам нужно загрузить несколько картинок для документации, хорошим подходом является использование git-lfs. Предполагая, что вы установили git-lfs, выполните следующие действия:
-
Внедрите git lfs для каждого типа вашего изображения:
git lfs *.png
git lfs *.svg
git lfs *.gif
git lfs *.jpg
git lfs *.jpeg
-
Создайте папку, которая будет использоваться в качестве местоположения изображения, например. doc
. В системах на основе GNU/Linux и Unix это можно сделать с помощью:
cd project_folder
mkdir doc
git add doc
-
Скопируйте и вставьте любые изображения в папку с документами. Затем добавьте их с помощью команды git add
.
-
Передайте и нажмите.
-
Изображения общедоступны по следующему адресу:
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)
Ответ 20
ПРОСТО ЭТО РАБОТАЕТ !!
позаботьтесь о том, чтобы ваше имя файла в верхнем регистре в теге, помещал PNG файл в корень и связывался с именем файла без указания пути:
![Screenshot](screenshot.png)
Ответ 21
Я просто расширяю или добавляю пример к уже принятому ответу.
После того, как вы разместили изображение на своем репозитории 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
находится в корневом каталоге.
Ответ 22
Этот ответ также можно найти по адресу: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md.
Отображать изображения из репо с помощью:
флаг добавления ?sanitize=true&raw=true
используйте <img/>
Пример URL работает для SVG, PNG и JPG, используя: - Домен:
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?sanitize=true&raw=true" />
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />
**https://cdn.rawgit.com**:
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png" />
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg" />
raw.githubusercontent.com:
https://cdn.rawgit.com:
Спасибо: - fooobar.com/questions/12384/... - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -в-уценка /readme.md
Ответ 23
Есть 2 простых способа сделать это,
1) использовать HTML-тег img,
2)! [] (Путь, по которому сохраняется ваше изображение /image-name.png)
путь можно скопировать с URL-адреса в браузере, пока вы открываете это изображение. может возникнуть проблема с пробелами, поэтому убедитесь, что есть пробел с двумя словами пути или в имени изображения add-> %20. так же, как браузер.
Оба они будут работать, если вы хотите понять больше, вы можете проверить мой GitHub → https://github.com/adityarawat29
Ответ 24
САМЫЙ ПОСЛЕДНИЙ
Вики могут отображать изображения в формате PNG, JPEG или GIF
Теперь вы можете использовать:
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]
-ИЛИ ЖЕ-
Следуй этим шагам:
-
На GitHub перейдите на главную страницу репозитория.
-
Под своим именем хранилища нажмите Wiki.
-
Используя боковую панель вики, перейдите на страницу, которую хотите изменить, и нажмите "Изменить".
-
На вики-панели инструментов нажмите Изображение.
- В диалоговом окне "Вставить изображение" введите URL-адрес изображения и альтернативный текст (который используется поисковыми системами и программами чтения с экрана).
- Нажмите ОК.
Ссылайтесь на документы.
Ответ 25
Я нашел другое решение, но совсем другое, и я объясню это
По сути, я использовал тег, чтобы показать изображение, но я хотел перейти на другую страницу, когда на изображение щелкнули, и вот как я это сделал.
<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />
Если вы поместите его рядом друг с другом, разделив его новой строкой, я думаю, когда вы щелкнете по изображению, он перейдет к тегу, у которого есть ссылка на другой сайт, который вы хотите перенаправить.
Ответ 26
Мы можем сделать это просто,
- создать новый выпуск на GitHub
- перетаскивать изображения на теле
div
выпуска
через несколько секунд будет сгенерирована ссылка. Теперь скопируйте ссылку или изображение URL и используйте его на любой поддерживаемой платформе.
Ответ 27
Рассмотрите возможность использования table
если добавляете несколько скриншотов, и хотите выровнять их с использованием табличных данных для улучшения доступности, как показано здесь:
Если ваш анализатор уценок поддерживает это, вы также можете добавить атрибут WIA-ARIA role="presentation"
к элементу TABLE и опустить теги th
.
Ответ 28
Я хотел обновить это с помощью ZenHub, поскольку GitHub и ZenHub изменили свои графические макеты.
Если вы устанавливаете ZenHub и разрешаете доступ к вашему GitHub, то вы можете перейти на вкладку ZenHub один раз в своем репо и открыть новый выпуск.
Это обновленная версия публикации видео Ахмада Амджи на YouTube.
Шаг 1:
Шаг 2: Оттуда вы можете открыть вложение.
Шаг 3: Затем вы можете использовать ссылку, созданную автоматически. Таким образом, вам не нужно беспокоиться о создании нового репо только для изображений.
Затем используйте стандартный синтаксис MarkDown с указанным URL.
Шаг 4
![alt text](image URL from ZenHub issue)
Шаг 5 Не забудьте закрыть черновик и не отправлять его. URL изображения все равно должен работать правильно!