Можно ли поместить скриншот в файл README в репозиторий GitHub? Какой синтаксис?
Можно ли поместить скриншот в файл README в репозиторий GitHub? Какой синтаксис?
Ответы:
Если вы используете Markdown (README.md):
При условии, что у вас есть изображение в вашем репо, вы можете использовать относительный URL:
![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title")
Если вам нужно встроить изображение, размещенное в другом месте, вы можете использовать полный URL
![Alt text](http://full/path/to/img.jpg "Optional title")
GitHub рекомендует использовать относительные ссылки с ?raw=true
параметром, чтобы убедиться, что разветвленные репо правильно указывают.
raw=true
Параметр существует для того , чтобы обеспечить изображение , ссылку, будет оказано как есть. Это означает, что с этим файлом будет связан только образ, а не весь интерфейс GitHub. Смотрите этот комментарий для более подробной информации.
Посмотрите пример: https://raw.github.com/altercation/solarized/master/README.md
Если вы используете SVGs , то вам необходимо установить атрибут дезинфицировать к true
а: ?raw=true&sanitize=true
. (Спасибо @EliSherer)
Также документация по относительным ссылкам в файлах README: https://help.github.com/articles/relative-links-in-readmes
И, конечно же, документы по уценке: http://daringfireball.net/projects/markdown/syntax
Кроме того, если вы создаете новую ветку screenshots
для хранения изображений, вы можете избежать их нахождения в master
рабочем дереве.
Затем вы можете вставить их, используя:
![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")
/relative/path/to/img.jpg
, разве это не абсолютный путь из-за ведущего слэша?
raw=true
параметр существует для того, чтобы визуализировать изображение, на которое указывает путь GitHub, а не интерфейс GitHub. Попробуйте увидеть разницу: github.com/altercation/solarized/blob/master/img/…s против github.com/altercation/solarized/blob/master/img/… . Первый URL покажет вам интерфейс GitHub и изображение, а второй покажет вам только изображение. Относительные ссылки все еще полезны при клонировании / разветвлении репозиториев, так что да, вы должны использовать относительные пути с этим параметром, но это две разные концепции.
Хотя уже есть принятый ответ, я хотел бы добавить еще один способ загрузки изображений в readme на GitHub.
Более подробную информацию вы можете найти здесь
Я обнаружил, что путь к изображению в моем репозитории не достаточен, мне пришлось ссылаться на изображение на raw.github.com
поддомене.
Формат URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}
Пример уценки ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)
raw.github.com
поддомене? куда загрузить файл изображения?
Одна строка ниже должна быть то, что вы ищете
если ваш файл находится в хранилище
![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})
если ваш файл находится в другом внешнем URL
![ScreenShot](https://{url})
Синтаксис уценки для отображения изображений действительно:
![image](https://{url})
НО: как обеспечить url
?
Итак ... вы можете использовать этот удивительный трюк, чтобы github размещал ваш файл изображения. TDLR:
http://solutionoptimist.com/2013/12/28/awesome-github-tricks/
Гораздо проще, чем добавить URL Просто загрузите изображение в тот же репозиторий, например:
![Screenshot](screenshot.png)
добавить это в README
<div align="center">
<img src="/screenshots/screen1.jpg" width="400px"</img>
</div>
Markdown: ![Screenshot](http://url/to/img.png)
Затем скопируйте источник изображения
Теперь добавьте ![Screenshot](http://url/to/img.png)
в ваш файл README.md
Выполнено!
В качестве альтернативы вы можете использовать какой-нибудь хостинг изображений, например, imgur
получить его URL и добавить его в файл README.md, или вы также можете использовать статический хостинг файлов.
Способ 1-> путь уценки
![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})
Способ 2-> HTML-способ
<img src="https://link(format same as above)" width="100" height="100"/>
или
<img src="https://link" style=" width:100px ; height:100px " />
Примечание -> Если вы не хотите стилизовать изображение, то есть изменить размер, удалите часть стиля
Во-первых, создайте каталог (папку) в корне локального репо, который будет содержать screenshots
добавляемый файл . Давайте назовем имя этого каталога screenshots
. Поместите изображения (JPEG, PNG, GIF, `и т. Д.), Которые вы хотите добавить в этот каталог.
Скриншот Android Studio Workspace
Во-вторых, вам нужно добавить ссылку на каждое изображение в ваш README. Итак, если у меня есть изображения с именами 1_ArtistsActivity.png
и 2_AlbumsActivity.png
в моем каталоге скриншотов, я добавлю их ссылки так:
<img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>
Если вы хотите, чтобы каждый снимок экрана находился на отдельной строке, напишите их ссылки на отдельных строках. Тем не менее, лучше, если вы напишите все ссылки в одну строку, разделенные только пробелом. На самом деле это может выглядеть не очень хорошо, но GitHub автоматически организует их для вас.
Наконец, внесите свои изменения и нажмите их!
Я погуглил несколько похожих вопросов и не увидел ответов с моей проблемой и ее довольно простым / легким решением.
Вот как: как OP, я хотел изображение в моем Github README, и, зная синтаксис Markdown для этого, набрал его:
![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}
Вы должны выполнить фактические замены выше (например, MY_IMAGE = image.jpg), чтобы это работало.
Но, подождите ... неудача - нет фактически отрендеренного фото! И ссылка в точности как указано в Google Storage!
camo
- анонимные изображенияGithub размещает ваши изображения анонимно , ура! Однако это представляет проблему для ресурсов хранения Google. Вам необходимо получить сгенерированный URL-адрес из консоли Google Cloud.
Однако я уверен, что есть более плавный способ, просто зайдите на заданную конечную точку URL и скопируйте длинный URL. Подробности:
https
неgs
) в новую вкладку / окно браузераНадеюсь, это поможет ускорить и прояснить эту проблему для всех остальных.
Для меня лучший способ -
Надеюсь, это поможет.
Добавить изображение в репозиторий из опции загрузки файла, затем в файл README
![Alt text]("enter image url of repositoryhere")
С изображениями, расположенными в /screen-shots
каталоге. Внешнее <div>
позволяет позиционировать изображения. Заполнение достигается с помощью <img width="desired-padding" height="0">
.
<div align="center">
<img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
<img height="0" width="8px">
<img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>
[Read more words!](docs/more_words.md)