GitHub Wiki (gollum) 저장소에 이미지를 삽입 하시겠습니까?

84

Github 위키는 별도의 git 저장소와 기본 프로젝트 저장소에서 지원됩니다.

Github 팀 의이 게시물 은 위키 마크 업 내부의 위키 저장소에 저장된 이미지에 링크 할 수 있어야하는 것처럼 들립니다.

이미지 및 폴더

이제 Git 저장소 내에서 호스팅되는 이미지를 참조 할 수 있습니다.

내 위키의 저장소를 확인하고 리소스 폴더와 이미지를 여기에 푸시했습니다. 제 질문은 이 이미지를 어떻게 사용 합니까?

이것이 가능하거나 내가 뭔가를 오해 했습니까?

github  wiki  gollum-wiki 
— 제임스 맥마흔
소스
거기에 대한 github의 - 자주 묻는 질문입니다 추가 - 이미지 - - 위키로는 하지만 짧은 상대 이미지 URL에 대한 어떤 정보를 정기적으로 여기에 논의가 없습니다
— K3B

답변:

57

상대 경로를 사용하려면 다음을 수행하십시오.

[[foo.jpg]]

자세한 내용 은 이미지에 대한 데모 위키 페이지를 참조하세요 .

— 벤자민 오크스
소스
경로를 하드 코딩하는 것보다 선호됩니다. 내가 알아낼 수 없었던 유일한 것은이 방법을 사용하여 대체 텍스트를 만드는 방법입니다. 아 그리고 그 데모의 이미지가 나에게로드되지 않습니다.
— James McMahon
git : //github.com/mojombo/gollum-demo.git을 복제 한 다음을 실행 gollum하면 볼 수 있습니다. :)
— Benjamin Oakes
4
아마도 내가 뭔가를 놓치고 있을지도 모르지만 내가 [[wiki syntax]]도와주는이 위키 의 작품들 : github.com/newhavenrb/conferences/wiki/WindyCityRails-2012 아마도 README로 이것을 시도하고 있습니까?
— Benjamin Oakes 2013 년
2
위키 구문은 파일 확장자에 의해 결정됩니다. .wiki미디어 위키 스타일을 사용합니다. .md마크 다운 스타일을 사용합니다 (RyanQ의 답변).
— Drew Noakes 2014
3
이 답변은 더 이상 작동하지 않습니다. 아래 @Werner의 답변을 참조하십시오 (간단히 설명하면! [text] (images / someimage.png)를 사용하고 저장-미리보기에 표시되지 않음)
— edmofro
96

github 위키에서 이미지를보고자하는 시청자를 위해 다음과 같은 방법을 찾았습니다.

  • 저장소의 wiki 페이지에있는 "Git Access"탭으로 이동하여 다음과 같은 SSH 경로를 검색하십시오. git@github.com : USER / REPO.wiki.git 여기서 USER는 계정 이름이고 REPO는 저장소 이름.

  • 로컬 컴퓨터에서 선택한 로컬 디렉토리로 cd하고 다음을 통해 저장소를 가져 오려는 Git 명령 줄 도구를 사용합니다.

    git clone git@github.com : USER / REPO.wiki.git

  • 이제이 저장소 내에서 이미지 디렉토리를 만들고 "이미지"라고 부르고 원하는 이미지를 디렉토리에 넣습니다.

  • 그런 다음 wiki git 디렉토리를 github에 푸시하십시오.

  • "페이지"탭에서 이미지를 물리적으로 볼 수는 없지만 로컬 링크에서 이미지를 참조하면 이미지를 볼 수 있습니다. 아래 마크 다운이있는 예 :

    ![Alt attribute text Here](images/YOURIMAGE.ext)

  • 다음과 같이 추가로 래핑하여 이미지를 링크 자체로 포함 할 수도 있습니다.

    [![Alt attribute text Here](images/YOURIMAGE.ext)](http://Yoursite.com)

"페이지"탭에 단순히 나열되기 때문에 위키를 구성하는 데 도움이되도록 로컬 사본 내에 하위 디렉토리를 추가 할 수도 있습니다. 그러나 새 디렉토리가 푸시 되더라도 "페이지"탭에는 디렉토리가 나열되지 않습니다.

— 라이언 Q
소스
31

에 이미지를 추가 할 때 어떤 답변도 작동하지 않는 것 같습니다 readme.md. 그래도 해결책이 있습니다.

이미지의 URL이 다음과 같은 경우 :

https://github.com/Username/Repository-Name/blob/master/Directory-Inside-Repository/image.png

교체 blob로하는 것은 raw당신에게 원시 이미지의 URL을 제공합니다 :

https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png

이제 일반 마크 다운을 사용하여 이미지를 삽입합니다.

![Image Alt](https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png)

업데이트 : 현재 GitHub는 다른 하위 도메인의 원시 이미지도 제공합니다 raw.github.com. 따라서 다음을 사용할 수도 있습니다.

https://raw.github.com/Username/Repository-Name/master/Directory-Inside-Repository/image.png

예: https://raw.github.com/Automattic/liveblog/master/screenshot-1.png

— its_me
소스
굉장합니다 ... 이로 인해 GitHub 댓글에서 직접 이미지에 연결할 수있었습니다. :) github.com/mccalltd/AttributeRouting/issues/…
— Leniel Maccaferri
1
감사합니다. 그것은 상대 경로가 작동하지 않습니다 유감
— 엘비스시오 티 (Ciotti)
26

상대 경로는 다음과 같이 작동합니다.

위키의 홈페이지 :

![text](wiki/images/someimage.png)

위키의 하위 페이지 :

![text](images/someimage.png)

미리보기를 할 때 이미지가 표시되지 않고 저장했습니다.

— 베르너
소스
3
@Werner의이 팁은 매우 중요합니다. (정말 감사합니다!) 어떤 이유로 위키의 홈 페이지가 다른 모든 페이지와 다르므로 홈 페이지 에서 다른 모든 페이지가 path / foo.ext를 사용하는 wiki / path / foo.ext 가 필요합니다 . 자신의 저장소에 대한 상대 참조는 절대 참조보다 훨씬 낫습니다. 프로젝트를 이동 또는 복제하거나 오프라인으로 수정하는 경우 저장소 위치에 관계없이 모든 것이 작동합니다. 또한이! [text] (link) 구문은 대부분의 용도에 적합하지만 이미지를 정렬해야하는 경우 표준 HTML IMG 태그를 사용해야합니다.
— TonyG
이 더 최신의 대답은 같다
— albfan
여기 지점은 무엇입니까?
— Jonny
15

드래그 앤 드롭으로 이미지를 빠르게 업로드하려면 다음을 수행 할 수 있습니다 (해킹이지만).

더미 문제를 만듭니다. 이미지를 거기에 끌어다 놓습니다. 업로드 된 마크 다운 이미지 코드를 위키에 복사 / 붙여 넣기

이슈를 한 번 생성 한 후에는 여러 번 사용하여이를 수행 할 수 있습니다.

이것이 이미지가 저장소에 상주 할 필요없이 빠른 수정을 찾는 사람에게 도움이되기를 바랍니다.

— 티비
소스
8

이를위한 실용적인 방법은 다음과 같습니다.

  • github의 문제로 이동
  • 댓글 섹션에서 파일을 첨부하고 드래그 / 드롭, 이미지 선택 또는 붙여 넣기 만 할 수 있습니다.
  • 텍스트 영역에 표시된 코드 / 링크 복사
  • 위키에 붙여 넣기
  • 이익!

@tiby 솔루션에 비해 이슈를 생성하거나 수정할 필요조차 없습니다!

— 제이콥 이엔 도이
소스
2
감사합니다! 왜 github가 위키 사이트에서이 기능을 지원하지 않는지 궁금합니다.
— Sven
2

마지막으로 nerdwin이 설명하는 방법을 사용하여 이미지를 저장소로 가져오고 다음을 사용하여 위키에 표시하도록했습니다. ![test](test.jpg)

— rupweb
소스
1

다음 마크 다운은 해당 GitHub 위키 내에서 GitHub 저장소 의 이미지를 참조합니다.

![My Alt Text](../blob/master/Path/ToAsset/In/Repo.png?raw=true)

위의 예는 저장소에 다음 파일 구조가 있다고 가정합니다.

  • 통로
    • ToAssets
      • 에
        • Repo.png

실제 예제의 경우 해당 위키의 github 에서이 이미지 를 참조 하려면이 마크 다운을 사용합니다.

![Azure App Settings](../blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)

주의 사항

  1. 케이스 문제
  2. 만약 당신이 위키의 특별한 홈 페이지에 있다면, 당신은 ../로 한 단계 올라갈 필요가 없습니다. 위의 예에서, 올바른 링크는 다음과 같습니다.

홈페이지의 경우 :

![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)
— 조롱
소스
케이스가 중요합니다. Repo.png는 repo.png과 동일하지 않습니다
— 조쉬
위키의 홈 페이지에있는 경우 약간 변경됩니다. ../을 드롭해야합니다. 링크는 (blob / master / Path / ToAsset / In / Repo.png? raw = true)
— Josh
호스팅 된 이미지의 분기가 중요합니까?
— Jonny
나는 그것을 시도하지 않았지만 내 샘플의 URL을 보면 그럴 것이라고 생각합니다. 내 샘플에서는 모든 것이 마스터라고 가정합니다. 아마도 내 샘플에서 "master"라는 단어를 이미지가있는 브랜치로 변경할 수 있습니다.
— Josh
1

상대 경로 사용

위키는 [repositoryname]/wiki

저장소의 파일은 다음 위치에 있습니다. [repositoryname]/raw/master/[file path in repository]

따라서 상대 경로를 사용하십시오. ../raw/master/[file path in repository]

— 사무엘 P
소스
내가해야 할 일을했을 ../../그래서 현재 페이지의 경로에 상대의주의, 서브 페이지
— tutuDajuju
master라는 브랜치가 없다면?
— 조니
1

내 위키에 이미지와 PDF를 모두 넣었습니다. 나는 위키를 복제하고, 추가 images하고를files 디렉토리를, 다음 삽입 이미지 링크 및 추가 파일 링크에 다음과 같은 가격 인하를 사용합니다 :

이미지 :

[[/images/path/to/image.ext|ALT TEXT]]

위키 페이지가 모두 루트 수준에 있으면 선행 슬래시가 필요하지 않지만 하위 디렉터리를 사용하고 절대 경로가 올바르게 해결되고 작업을 간단하게 유지합니다.

파일 :

[link text](files/path/to/file.ext "ALT TEXT")

위키의 선행 슬래시가 없습니다. files이 형식의 링크로 올바르게 해석 경로에 .

나는 이것을 GitHub 요점에 더 자세히 문서화했습니다.

— Subfuzion
소스
0

외부 이미지 축소판을 포함하려면 다음을 사용하십시오. ![Image](<external link to the image>)

— delta24
소스
0

@ Drew Noakes 의 원래 질문에 대한 의견은 나를 위해 그것을했습니다.

표시하고자하는 이미지의 구문 :

[[/images/imageName.png]]

이 이미지는 이름을 바꿀 때만 표시되었습니다.

wikiPage.md --> wikiPage.wiki

다음 폴더 구조는 위키 저장소에서 사용되었습니다.

repository.wiki
   |--wikiPage.wiki
   |--images
        |--imageName.png

그러나:

.wiki의 구문은 .md 파일과 다릅니다.

— 바위가 많은
소스
0

많은 답변이 저에게 효과가 없었습니다. 마침내 효과가 있었던 것은 다음과 같습니다.

![](../raw/master/Images/ImportantImage.png)

"마크 다운"편집기 모드 및 다음과 같은 하위 페이지 사용 :

https://github.com/project/repo/wiki/MyPage

-남자

— JohnKoz
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.