최근에 나는 GitHub에 가입했습니다. 나는 그곳에서 몇 가지 프로젝트를 주최했습니다.
README 파일에 일부 이미지를 포함해야 합니다. 방법을 모르겠습니다.
이것에 대해 검색했지만 "웹에서 이미지를 호스팅하고 README.md 파일에 이미지 경로를 지정하십시오"라고 알려주는 링크가 전부였습니다.
타사 웹 호스팅 서비스에서 이미지를 호스팅하지 않고 이 작업을 수행할 수 있는 방법이 있습니까?
반응형
질문자 :Midhun MP
다음 마크다운을 사용해 보세요.
리포지토리에 저장되어 있는 경우 이미지의 원시 버전에 직접 연결할 수 있다고 생각합니다. 즉
captainclam
다음과 같은 상대 경로를 사용할 수도 있습니다.
 .fileExtention 다음을 시도하십시오.
resultsway
- 새 문제를 만들 수 있습니다.
- 그것에 이미지를 업로드(드래그 앤 드롭)
- 이미지 URL을 복사하여 README.md 파일에 붙여넣습니다.
다음은 이에 대해 자세히 설명한 자세한 YouTube 동영상입니다.
Ahmad Ajmi
그것보다 훨씬 간단합니다.
이미지를 저장소 루트에 업로드하고 다음과 같이 경로 없이 파일 이름에 연결하기만 하면 됩니다.
user3638471
간단한 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>Evin1_
게시된 많은 솔루션이 불완전하거나 내 취향에 맞지 않습니다.
- imgur와 같은 외부 CDN은 체인에 다른 도구를 추가합니다. 음.
- 이슈 트래커에서 더미 이슈를 생성하는 것은 해킹입니다. 혼란을 야기하고 사용자를 혼란스럽게 합니다. 이 솔루션을 포크로 마이그레이션하거나 GitHub에서 마이그레이션하는 것은 고통스러운 일입니다.
- gh-pages 브랜치를 사용하면 URL이 부서지기 쉽습니다. gh-page를 유지 관리하는 프로젝트에서 일하는 다른 사람은 이러한 이미지의 경로에 따라 외부에 있는 것을 모를 수 있습니다. 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 optional, you'll see below.이미지의 이 개정판에 대한 "영구 링크"를 구성하고 Markdown으로 래핑합니다.
그러나 손으로 커밋 SHA를 찾는 것은 불편하므로 이 help.github 페이지에 나와 있는 것처럼 특정 커밋의 파일에 대한 영구 링크에 대한 단축키로 Y를 누르십시오.
자산 분기에 항상 최신 이미지를 표시하려면 Blob URL을 사용합니다.
https://github.com/github/{repository}/blob/assets/cat.png(동일한 GitHub 도움말 페이지에서 파일 보기는 분기의 최신 버전을 보여줍니다 )
paulmelnikow
폴더( myFolder )에 이미지( image.png )를 커밋 하고 README.md에 다음 줄을 추가합니다.
Darush
README 파일에 일부 이미지를 포함해야 합니다. 방법을 모르겠습니다.
GitHub 리포지토리의 readme에 대한 간단한 이미지 갤러리를 만들고 사용자 지정할 수 있는 작은 마법사를 만들었습니다. ReadmeGalleryCreatorForGitHub를 참조하십시오.
README.md 에서 발생하도록 허용한다는 사실을 이용합니다. 또한 마법사는 문제 영역에 끌어다 놓아 이미지를 GitHub에 업로드하는 인기 있는 트릭을 사용합니다(이 스레드의 답변 중 하나에서 이미 언급함).
B12Toaster
- 이미지 추가와 관련된 문제 만들기
- 드래그 앤 드롭 또는 파일 선택기로 이미지 추가
그런 다음 이미지 소스를 복사하십시오.
이제
를 추가하십시오.
완료!
imgur 와 같은 이미지 호스팅 사이트를 사용하여 URL을 가져와 README.md 파일에 추가하거나 정적 파일 호스팅을 사용할 수도 있습니다.
abe312
기본 구문
여기:
- my-image-alt-tag : 이미지가 표시되지 않을 경우 표시될 텍스트입니다.
- url-to-image : 이미지 리소스가 무엇이든 상관없습니다. 이미지의 URI
예시:
이것은 다음과 같이 보일 것입니다:
alamin
저장소에 대한 상대 src를 사용하여 README.md에 <img> 태그를 추가하기만 하면 됩니다. 상대 src를 사용하지 않는 경우 서버가 CORS를 지원하는지 확인하십시오.
GitHub가 inline-html을 지원하기 때문에 작동합니다.
<img src="/docs/logo.png" alt="My cool logo"/> # My cool project and above is the logo of it여기에서 관찰
rocketspacer
테이블을 사용하여 눈에 띄게하십시오. 별도의 매력을 줄 것입니다.
테이블 구문은 다음과 같습니다.
각 열 셀을 기호로 구분 |
및 테이블 헤더(첫 번째 행)를 두 번째 행으로 ---
| 열 1 | 열 2 |
|------------|-------------|
| 이미지 1 | 이미지 2 |
산출
이제 두 개의 이미지를 사용하는 경우 이미지 1과 이미지 2 <img src="url/relativePath">
참고: 여러 이미지를 사용할 때 더 많은 열이 포함된 경우 너비 및 높이 속성을 사용하여 보기 좋게 만들 수 있습니다.
예시
| 열 1 | 열 2 |
|------------|-------------|
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250"> |
간격은 중요하지 않습니다
출력 이미지
에 의해 도움 : adam-p
Shashankesh Upadhyay
단계별 프로세스, 먼저 폴더 이름을 지정하고 업로드하려는 이미지/이미지를 Readme.md 파일에 추가합니다. (프로젝트의 기존 폴더에 이미지/이미지를 추가할 수도 있습니다. ) 이제 Readme.md 파일의 편집 아이콘을 클릭한 다음
 // refrence_image is the name of image in my case.이미지를 추가한 후 "변경 사항 미리보기" 탭에서 변경 사항을 미리 볼 수 있습니다. 여기에서 이미지를 찾을 수 있습니다. 예를 들어 내 경우에는
app 폴더 -> src 폴더 -> 메인 폴더 -> res 폴더 -> drawable 폴더 -> drawable 폴더 안에 refrence_image.png 파일이 있습니다. 여러 이미지를 추가하려면 다음과 같이 할 수 있습니다.
  참고 1 - 이미지 파일 이름에 공백이 없는지 확인하십시오. 공백이 포함된 경우 파일 이름 사이의 각 공백에 %20을 추가해야 합니다. 공백을 제거하는 것이 좋습니다.
참고 2 - HTML 태그를 사용하여 이미지 크기를 조정할 수도 있고 다른 방법이 있습니다. 당신은 더 많은 것을 위해 그것을 구글 수 있습니다. 필요한 경우.
그런 다음 커밋 변경 메시지를 작성한 다음 변경 사항을 커밋합니다.
다른 많은 해킹 방법, 문제 생성 등의 방법이 있습니다. 지금까지 이것이 내가 만난 최고의 방법입니다.
Jwala Kumar
새로운 Github UI에서는 이것이 저에게 효과적입니다.
예 - 폴더(myFolder)에 image.png를 커밋하고 README.md에 다음 줄을 추가합니다.
Prashant Gaikwad
이제 readme 파일을 편집하는 동안 이미지를 끌어다 놓을 수 있습니다.
Github은 다음 형식의 링크를 생성합니다.
https://user-images.githubusercontent.com/******/********.file_format또는 파일 하단에 "드래그 앤 드롭, 선택 또는 붙여넣기로 파일을 첨부하십시오"라고 표시됩니다. 해당 파일을 클릭하면 파일을 직접 업로드하거나 붙여넣을 수 있는 옵션이 제공됩니다!
siamsot
당신은 그냥 할 수 있습니다:
git checkout --orphan assets cp /where/image/currently/located/on/machine/diagram.png . git add . git commit -m 'Added diagram' git push -u origin assets 그런 다음 다음과 같이 README 파일에서 참조할 수 있습니다.
Daniel
나는 일반적으로 사이트에서 이미지를 호스팅하며, 호스팅된 모든 이미지에 연결할 수 있습니다. 읽어보기에 이것을 던져 넣기만 하면 됩니다. 대한 작품 .rst 하지 않도록에 대한 파일, .md
.. image:: https://url/path/to/image :height: 100px :width: 200 px :scale: 50 %Adam Hughes
제 경우에는 imgur 를 사용하고 이런 식으로 직접 링크를 사용합니다.
Kegham K.
대체 github CDN 링크를 사용하여 README.md(또는 외부)에서 프로젝트의 이미지에 연결할 수 있습니다.
URL은 다음과 같습니다.
https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>내 프로젝트에 SVG 이미지가 있고 내 Python 프로젝트 문서에서 참조할 때 렌더링되지 않습니다.
프로젝트 링크
다음은 파일에 대한 프로젝트 링크입니다(이미지로 렌더링되지 않음).
https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg
포함된 이미지의 예: 
원시 링크
다음은 파일에 대한 RAW 링크입니다(여전히 이미지로 렌더링되지 않음).
https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg
포함된 이미지의 예: 
CDN 링크
CDN 링크를 사용하여 (이미지로 렌더링)을 사용하여 파일에 연결할 수 있습니다.
https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg
포함된 이미지의 예: 
README.md 파일과 PyPi 프로젝트 reStructredText 문서( 여기 )에서 내 프로젝트의 이미지를 사용할 수 있는 방법입니다.
JGC
이것은 작동합니다!!
태그의 파일 이름 대문자에주의하고 PNG 파일을 루트에 넣고 경로없이 파일 이름에 연결하십시오.
Farbod Aprin
당신이 사용할 수있는
 여기서 ![A test image] 는 대체 텍스트이고 (image.png) 는 이미지에 대한 링크입니다.
클라우드 서비스 또는 기타 온라인 이미지 호스팅 플랫폼에 이미지를 가질 수 있습니다. 또는 리포지토리에 있는 경우 리포지토리에서 이미지 링크를 제공할 수 있습니다.
readme 이미지 전용으로 저장소 내부에 특정 폴더를 만들 수도 있습니다.
kushagra-aa
이 문제를 해결했습니다. 다른 사람의 readme 파일만 참조하면 됩니다.
먼저 github 코드 라이브러리에 이미지 파일을 업로드해야 합니다! 그런 다음 이미지 파일의 주소를 직접 참조합니다.
ylgwhyh
이 작업을 수행할 수 있는 2가지 간단한 방법이 있습니다.
1) HTML img 태그 사용,
2) 
해당 이미지를 연 동안 브라우저의 URL에서 경로를 복사할 수 있습니까? 간격 문제가 발생할 수 있으므로 경로 또는 이미지 이름 add-> %20에 두 단어로 공백이 있는지 확인하십시오. 브라우저가 하는 것처럼.
둘 다 작동합니다. 더 많은 것을 이해하려면 내 github -> https://github.com/adityarawat29를 확인할 수 있습니다.
Aditya Singh Rawat
이 답변은 https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md 에서도 찾을 수 있습니다.
다음을 사용하여 리포지토리의 이미지를 표시합니다.
도메인 앞에 추가: https://raw.githubusercontent.com/
플래그 추가: ?sanitize=true&raw=true
<img /> 태그 사용
샘플 URL은 다음을 사용하여 svg, png 및 jpg에서 작동합니다.- 도메인 :
raw.githubusercontent.com/ - 사용자 이름 :
YourUserAccount/ - 레포 :
YourProject/ - 지점 :
YourBranch/ - 경로 :
DirectoryPath/ - 파일명 :
example.png
SVG, PNG 및 JPEG에서 작동
- `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`사용 후 아래에 표시된 작업 예제 코드:
**raw.githubusercontent.com**: <img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" /> <img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />raw.githubusercontent.com :
감사합니다: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown/readme.md
CrandellWS
Github 뿐만 아니라 NPM 에도 인쇄 화면을 표시하고 싶었습니다. 상대 경로를 사용하는 Github 내에서 작동했지만 외부에서는 작동하지 않았습니다. 기본적으로 내 프로젝트를 NPM 으로 푸시하더라도(단순히 동일한 readme.md 사용) 이미지가 표시되지 않았습니다.
나는 몇 가지 방법을 시도했지만 결국 이것이 나를 위해 일한 것입니다.
NPM 또는 패키지를 게시할 수 있는 다른 곳에서 내 이미지가 올바르게 표시됩니다.
ghiscoding
문서화를 위해 사진을 업로드해야 하는 경우 git-lfs 를 사용하는 것이 좋습니다. git-lfs를 설치했다고 가정하고 다음 단계를 따르세요.
각 이미지 유형에 대해 git lfs를 초기화합니다.
git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpeg예를 들어 이미지 위치로 사용할 폴더를 만듭니다.
doc. GNU/Linux 및 Unix 기반 시스템에서는 다음을 통해 수행할 수 있습니다.cd project_folder mkdir doc git add doc모든 이미지를 복사하여 문서 폴더에 붙여넣습니다.
git add명령을 통해 추가합니다.커밋하고 푸시합니다.
이미지는 다음 URL에서 공개적으로 사용할 수 있습니다.
https://media.githubusercontent.com/media/ ^github_username^/^repo^/^branch^/^이미지_위치 저장소^
여기서: * ^github_username^ 은 github의 사용자 이름(프로필 페이지에서 찾을 수 있음) * ^repo_name^ 은 저장소 이름입니다. * ^branch^ 는 이미지가 업로드되는 저장소 분기입니다. * ^image_location in the repo^ 입니다. 이미지가 저장된 폴더를 포함한 위치.
또한 먼저 이미지를 업로드한 다음 프로젝트 github 페이지의 위치를 방문하고 이미지를 찾을 때까지 탐색한 다음 download 버튼을 누른 다음 브라우저의 주소 표시줄에서 URL을 복사하여 붙여넣을 수 있습니다.
내 프로젝트에서 이것을 참조로 보십시오.
그런 다음 위에서 언급한 마크다운 구문을 사용하여 URL을 사용하여 포함할 수 있습니다.
예: 이 사진 을 사용한다고 가정해 보겠습니다. 그러면 마크다운 구문을 사용할 수 있습니다.
Dimitrios Desyllas
이미 수락 된 답변에 예제를 확장하거나 추가하고 있습니다.
일단 Github 저장소에 이미지를 넣었습니다.
그 다음에:
- 브라우저에서 해당 Github 리포지토리를 엽니다.
- 대상 이미지 파일로 이동한 다음 새 탭에서 이미지를 엽니다.
- URL 복사
- 그리고 마지막으로 다음 패턴에 URL을 삽입하십시오
제 경우에는
어디에
-
shadmazumder는 내username -
Xcode는projectname -
master는branch -
InOnePicture.png는image. 제 경우에는InOnePicture.png가 루트 디렉토리에 있습니다.
Shad
다른 솔루션을 찾았지만 상당히 다르며 설명하겠습니다.
기본적으로 태그를 사용하여 이미지를 보여주었는데 이미지를 클릭했을 때 다른 페이지로 이동하고 싶었습니다. 방법은 다음과 같습니다.
<a href="the-url-you-want-to-go-when-image-is-clicked.com" /> <img src="image-source-url-location.com" />새 줄로 구분하여 서로 바로 옆에 놓으면 이미지를 클릭하면 리디렉션하려는 다른 사이트에 대한 href가 있는 태그로 이동합니다.
LuisDev99
최신
Wiki는 PNG, JPEG 또는 GIF 이미지를 표시할 수 있습니다.
이제 다음을 사용할 수 있습니다.
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]-또는-
이 차례를 따라라:
GitHub에서 리포지토리의 기본 페이지로 이동합니다.
저장소 이름 아래에서 Wiki를 클릭합니다.
Wiki 사이드바를 사용하여 변경하려는 페이지로 이동한 다음 편집을 클릭합니다.
Wiki 도구 모음에서 이미지 를 클릭합니다.
"이미지 삽입" 대화 상자에서 이미지 URL과 대체 텍스트(검색 엔진 및 화면 판독기에서 사용)를 입력합니다.
확인을 클릭합니다.
문서를 참조하십시오.
Lal Krishna
여러 스크린샷을 추가하고 다음과 같이 접근성 향상을 위해 테이블 형식 데이터를 사용하여 정렬하려는 경우 table 사용을 고려하십시오.
마크다운 파서가 지원한다면 role="presentation" WIA-ARIA 속성을 추가하고 th 태그를 생략할 수도 있습니다.
Josh Habdas
출처 : http:www.stackoverflow.com/questions/14494747/how-to-add-images-to-readme-md-on-github
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| Python에서 문자열의 하위 문자열을 얻으려면 어떻게 해야 합니까? (0) | 2021.11.19 |
|---|---|
| 새 탭이 아닌 새 탭에서 URL 열기 (0) | 2021.11.19 |
| Git을 사용하여 원격 저장소에 태그를 푸시하는 방법은 무엇입니까? (0) | 2021.11.19 |
| CSS에서 여백과 패딩을 사용하는 경우 [닫힘] (0) | 2021.11.19 |
| 요청 본문이 있는 HTTP GET (0) | 2021.11.19 |