Как добавить картинку в readme github


Теперь вы можете перетаскивать изображения во время редактирования файла readme.

Github создаст для вас ссылку в формате:

Кроме того, внизу файла написано: «Прикрепите файлы, перетаскивая, выбирая или вставляя их». Если вы нажмете на него, у вас будет возможность загрузить файл напрямую или вы можете просто вставить его!

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

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

Рассмотрите возможность использования table , если добавляете несколько снимков экрана и хотите выровнять их с использованием табличных данных для улучшения доступности, как показано здесь:

Если ваш анализатор уценки поддерживает это, вы также можете добавить атрибут role=»presentation» WIA-ARIA к элементу TABLE и опустить теги th .

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

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

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

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

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

Под именем вашего репозитория нажмите Wiki.

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

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

В диалоговом окне «Вставить изображение» введите URL-адрес изображения и замещающий текст (который используется поисковыми системами и программами чтения с экрана).

Я нашел другое решение, но совсем другое, и я объясню его

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

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

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

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

• Откройте соответствующее репозиторий Github в своем браузере.
• Перейдите к целевому файлу изображения. Затем просто откройте изображение в новой вкладке.
• Скопируйте URL
• И, наконец, вставьте URL в следующий шаблон 

В моем случае это


• shadmazumder мой username
• Xcode — это projectname
• master — это branch
• InOnePicture.png — это image , в моем случае InOnePicture.png находится в корневом каталоге.

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

Инициализируйте git lfs для каждого типа изображения:

Создайте папку, которая будет использоваться в качестве местоположения изображения, например. doc . В системах на базе GNU / Linux и Unix это можно сделать с помощью:

Скопируйте и вставьте любые изображения в папку с документами. Затем добавьте их с помощью команды 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-адрес, чтобы включить их, используя синтаксис уценки, упомянутый выше:

Например: допустим, мы используем this фото Тогда вы можете использовать синтаксис уценки:

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

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

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

Есть два простых способа сделать это:

1) используйте тег HTML img,

2)! [] (Путь, по которому сохраняется ваше изображение / image-name.png)

Путь, который вы можете скопировать из URL-адреса в браузере, когда вы открыли это изображение. может возникнуть проблема с интервалом, поэтому убедитесь, что есть пробел между двумя словами пути или в имени изображения add->% 20. точно так же, как это делает браузер.

GitHub Markdown: Add an Image to README.md File

In GitHub, you can add an image to a README.md file in three ways. First, by referencing the existing image file that exists in your GitHub repository, second, by uploading a new image file to your repository and reference it in the README.md file and the third is by referencing an external image file. In this tutorial, I am giving examples of all these three ways to show you, how to add an image to the README.md file in GitHub. But first of all, you should know the syntax to specify an image file in the README.md or in any document in the GitHub.

GitHub Image Markdown Syntax

It starts with an exclamation mark, then square brackets where you can specify the alt text for SEO and then the image file URL in parenthesis.

1. Add an existing Image to README.md file

In the following example, we will add an image file that already exists in our repository. Below is the screenshot of the image folder contents in repository markdown-demo :

Here you can see, that we have the image file named github-logo.png in folder images of the markdown-demo repository. Now we can add this image in our README.md file as shown in the below example:

After editing the README.md file, Commit the changes. The output would be as shown in the below image:

Output:

2. Add an Image by Uploading a New Image File to Repository

In this example, we will upload a new image file in our repository markdown-demo and then we will add it to the README.md file. Follow these steps:

Upload a New Image File to Your Repository

In your repository root directory or in any existing folder, click on the Upload Files button as shown in the image below:

Then in the next step, you can browse or drag and drop a particular image or multiple images or any folder containing the images, as shown in the below screenshot: