GitHub 리포지토리의 README 파일에 스크린 샷을 넣을 수 있습니까? 구문은 무엇입니까?

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

이미 받아 들여진 답변이 있지만 GitHub에서 readme에 이미지를 업로드하는 다른 방법을 추가하고 싶습니다.

• 리포지토리에 이슈를 만들어야합니다
• 댓글 영역에서 이미지를 드래그 앤 드롭
• 이미지에 대한 링크가 생성되면 추가 정보에 삽입하십시오

자세한 내용은 여기를 참조 하십시오

리포지토리의 이미지 경로가 충분하지 않다는 것을 알았습니다 raw.github.com. 하위 도메인 의 이미지에 연결해야했습니다 .

URL 형식 https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

마크 다운 예 ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

1. postimage.org에 이미지 업로드
2. github Markdown url 받기
3. 읽어보기에 삽입

아래 한 줄은 찾고있는 것이어야합니다.

파일이 저장소에있는 경우

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

파일이 다른 외부 URL에있는 경우

![ScreenShot](https://{url})

이미지를 표시하기위한 마크 다운 구문은 다음과 같습니다.

![image](https://{url})

그러나 : 어떻게 제공 url합니까?

• 스크린 샷으로 레포를 어지럽히고 싶지 않을 것입니다. 코드와는 아무런 관련이 없습니다.
• 웹에서 이미지를 사용 가능하게 만드는 번거 로움을 처리하고 싶지 않을 수도 있습니다 ... (이미지를 서버에 업로드 ...).

따라서 ...이 멋진 트릭 을 사용하여 github을 이미지 파일로 호스팅 할 수 있습니다. TDLR :

1. 리포지토리 이슈리스트에 이슈를 생성
2. 이 문제에 대한 스크린 샷을 끌어다 놓으십시오
3. github에서 방금 만든 마크 다운 코드를 복사 하여 이미지를 표시하십시오.
4. 당신의 readme에 (또는 원하는 곳에) 붙여 넣기

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>

가격 인하: ![Screenshot](http://url/to/img.png)

• 이미지 추가와 관련된 문제 만들기
• 끌어서 놓기 또는 파일 선택기로 이미지 추가

• 그런 다음 이미지 소스를 복사하십시오.

• 이제 ![Screenshot](http://url/to/img.png)README.md 파일에 추가 하십시오

끝난!

또는 일부 이미지 호스팅 사이트를 사용하여 imgurURL을 가져 와서 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 작업 영역 스크린 샷

둘째, 각 이미지에 대한 링크를 README에 추가해야합니다. I라는 이미지가 있다면 그래서, 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가 자동으로 정렬합니다.

마지막으로 변경 사항을 커밋하고 푸시하십시오!

비슷한 질문 몇 가지를 봤는데 내 문제와 그 답이 간단하고 쉬운 해결책에 대한 답변을 보지 못했습니다.

Google Cloud Storage-README의 이미지에 대한 약간 다른 접근법

OP와 마찬가지로 Github README에 이미지를 원했고 Markdown 구문을 알고 다음과 같이 입력했습니다.

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

이 작업을 수행하려면 위의 실제 대체 (예 : MY_IMAGE = image.jpg)를 완료해야합니다.

그러나 기다립니다 ... 실패-실제 렌더링 된 사진이 없습니다! 링크는 Google 스토리지에서 제공 한 것과 동일합니다.

Github- camo익명 이미지

Github는 이미지를 익명으로 호스팅합니다 . 그러나 이는 Google 스토리지 자산에 문제가됩니다. Google Cloud Console에서 생성 된 URL을 가져와야합니다.

더 부드러운 방법이 있다고 확신하지만 주어진 URL 끝점을 방문하여 긴 URL을 복사하십시오. 세부:

명령

1. 스토리지 콘솔을 방문하십시오 : https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? project = $ {MY_PROJECT}
2. Github에 표시하고 싶은 이미지를 클릭하십시오 ( "객체 세부 사항"페이지가 나타납니다)
3. 해당 URL ( httpsnot gs로 시작하는 파스타 )을 새 브라우저 탭 / 창에 복사 하십시오.
4. 새 브라우저 탭 / 창에서 Github README 파일로 새로 생성 된 URL을 복사하십시오 (더 길어야 함).

잘하면 이것이 다른 사람을 위해이 문제의 속도를 높이고 명확하게하는 데 도움이되기를 바랍니다.

나에게 가장 좋은 방법은-

1. github에서 해당 저장소에 대한 새로운 문제를 만든 다음 파일을 gif 형식으로 업로드하십시오. 비디오 파일을 gif 형식으로 변환하려면이 웹 사이트 http://www.online-convert.com/을 사용 하십시오.
2. 새로 작성된 문제를 제출하십시오.
3. 업로드 한 파일의 주소를 복사
4. 마지막으로 README 파일에! [demo] (COPIED ADDRESS)를 넣으십시오.

이것이 도움이되기를 바랍니다.

파일 업로드 옵션에서 저장소에 이미지를 추가 한 다음 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>