Добавлять изображения в файле README.MD на Гитхабе


недавно я присоединился GitHub. Я провел там несколько проектов.

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

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

есть ли способ сделать это без таких изображений на любых сторонних веб-хостинга?

21 1151

21 ответ:

попробуйте эту уценки:

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

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

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Edit: просто заметил комментарий, ссылающийся на статью, которая предлагает использовать gh-страницы. Кроме того, относительные ссылки могут быть лучшей идеей, чем абсолютные URL-адреса, которые я опубликовал выше.

вы также можете использовать относительные пути, как

![Alt text](relative/path/to/img.jpg?raw=true "Title")
  • вы можете создать новую проблему
  • загрузить (перетащить и падение) изображения к нему
  • скопируйте URL-адрес изображения и вставьте его в свой README.md файл.

вот подробное видео youTube объяснил это подробно:

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

вы также можете добавить изображения с простым 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>

все гораздо проще.

просто загрузите свое изображение в корень репозитория и свяжите его с именем файла без какого-либо пути, например:

![Screenshot](screenshot.png)

многие из опубликованных решений являются неполными или не в моем вкусе.

  • внешний 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 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 вместо sha:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)

Commit изображение (изображения.png) в папке ( myFolder) и добавьте следующую строку в свой README.md:

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

Базовый Синтаксис

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

здесь:

  1. my-image-alt-tag: текст, который будет отображаться, если изображение не отображается.
  2. url-to-image : независимо от вашего ресурса изображения. URI изображения

пример:

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

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

stack overflow image by alamin

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

  • добавлять ![alt tag](http://url/to/img.png) к вашему README.md файл

готово!

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

образец вопрос

просто добавить <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

наблюдать здесь

мне нужно включить некоторые изображения в мой файл README. Я не знаю как сделать это.

Я создал небольшой мастер, который позволяет создавать и настраивать простые галереи изображений для readme вашего репозитория GitHub: см. ReadmeGalleryCreatorForGitHub.

мастер использует тот факт, что GitHub позволяет тегам img появляться в README.md. Кроме того, мастер использует популярный трюк загрузки изображений в GitHub с помощью перетащите их в область проблемы (как уже упоминалось в одном из ответов в этой теме).

в моем случае я использую imgur и используйте прямую ссылку таким образом.

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

Я обычно размещаю изображение на сайте, это может ссылаться на любое размещенное изображение. Просто бросьте это в readme. Работает для .rst файлы, не знаете, о .md

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

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

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



enter image description here

enter image description here

вы можете ссылаться на изображения в своем проекте из README.md (или внешне) с помощью альтернативной ссылки GitHub CDN.

URL будет выглядеть так:

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

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

ссылка на проект

вот ссылка проекта на файл (не отображается как изображение):

/ images / content/14494747/ddda883b913b13a26eb23be1af56194e. svg

пример внедренного изображения: image

Raw link

вот сырая ссылка на файл (по-прежнему не отображается как изображение):

/ images/content/14494747 / 322c64d9e41784f90479240e57c1e6d7.svg

пример внедренного изображения: image

CDN link

используя ссылку CDN, я могу ссылаться на использование файла (визуализация в виде изображения):

/ images/content/14494747 / dd1a896c834e2a5ef975eed15fbe80f9.svg

пример внедренного изображения: image

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

в моем случае я хотел показать экран печати на Github а также на NPM. Хотя использование относительного пути работало в пределах Github, Он не работал вне его. В принципе, даже если я подтолкнул свой проект к NPM а также (который просто использует то же самое readme.md, изображение никогда не показывал.

я попробовал несколько способов, в конце это то, что сработало для меня:

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

теперь я вижу свое изображение правильно на NPM или где-нибудь еще, что я может опубликовать мой пакет.

в случае, если вам нужно загрузить несколько фотографий для документации, хороший подход заключается в использовании git-lfs. Asuming, что вы установили git-lfs выполните следующие действия:

  1. Intialize 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. После этого добавьте их через

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

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

затем:

  • откройте соответствующее репозиторий Github в вашем браузере.
  • перейдите к целевому файлу изображения, а затем просто откройте изображение на новой вкладке. Opening the image in a new tab
  • скопируйте url Copy the url from the browser tab
  • и, наконец, вставить 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 находится в корневом каталоге.

последний

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

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

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

или

выполните следующие действия:

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

  2. на ваше имя хранилища, нажмите кнопку Вики.

  3. С помощью боковой панели wiki перейдите на страницу, которую требуется изменить, и нажмите кнопку Редактировать.

  4. на панели инструментов Вики, нажмите кнопку изображения.

  5. в диалоговом окне" вставка изображения " введите URL-адрес изображения и текст alt (который используется поисковыми системами и средствами чтения с экрана).
  6. Нажмите кнопку ОК.

см. Docs.

ПРОСТО ЭТО РАБОТАЕТ!!

позаботьтесь о своем имени файла в верхнем регистре в теге и поместите PNG-файл в корневой каталог, а также ссылку на имя файла без какого-либо пути:

![Screenshot](screenshot.png)

мы можем сделать это просто,

  • создать новый выпуск на GitHub
  • перетащите изображения на теле div выпуска

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